javascript 在 React 中禁用 DIV onClick 的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51549115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to disabled DIV onClick in React
提问by ZeroDarkThirty
I have a component with a div that accepts onClick and aria-disabled properties. Both of them come in as props, with disabled being an optional one. In my render method I do the following:
我有一个带有接受 onClick 和 aria-disabled 属性的 div 的组件。它们都是作为道具出现的，残疾人是可选的。在我的渲染方法中，我执行以下操作：
<div onClick={!this.props.Disabled ? this.props.Click : undefined}
aria-disabled={this.props.Disabled>My Div</div>
I use CSS to visualize the disabled state (opacity: 0.5, pointer-event: none blah blah). But I wonder if there's a better way to handle the actual onClick. Since it's a mandatory prop... so even when the item is disabled you still need to pass in an onClick to meet the condition. Is there a better way to go about this?
我使用 CSS 来可视化禁用状态（不透明度：0.5，指针事件：无等等）。但我想知道是否有更好的方法来处理实际的 onClick。由于它是一个强制道具......所以即使该项目被禁用，您仍然需要传入一个 onClick 以满足条件。有没有更好的方法来解决这个问题？
回答by Pramod
test.scss
测试文件
div[disabled]
{
pointer-events: none;
opacity: 0.7;
}
The above code makes the contents of the div disabled. You can make div disabled by adding disabled attribute. Test.js
上面的代码使 div 的内容被禁用。您可以通过添加 disabled 属性来禁用 div。 测试.js
<div disabled={this.state.disabled}>
/* Contents */
</div>
Upon clicking the button you can change the state variable disabled as 'true'.
单击按钮后，您可以将禁用的状态变量更改为“true”。
handleClick = () =>{
this.setState({
disabled: true,
});
}
回答by jpsimons
I think you're intuition is right -- not ideal to be adding and removing event handlers all the time based on changing props. How about simply wrapping the function and returning as needed? As in the following E.g.
我认为你的直觉是对的——根据改变道具一直添加和删除事件处理程序并不理想。简单地包装函数并根据需要返回怎么样？如下例所示
<div onClick={(e) => !this.props.Disabled && this.props.Click(e)}
aria-disabled={this.props.Disabled}>
My Div
</div>
Where the guard operator &&is shorthand for if logic.
守卫运算符&&是 if 逻辑的简写。
回答by yts
A buttonmight be better suited for this. With a buttonelement, the onClickwill automatically not fire if the disabledvalue is true. So you could do:
Abutton可能更适合这种情况。对于button元素，onClick如果disabled值为真，则不会自动触发。所以你可以这样做：
<button onClick={this.props.Click} disabled={this.props.Disabled}>My button</button>
You also get the accessibility benefits of using a button over a div.
您还可以获得在 div 上使用按钮的可访问性优势。
There is nothing wrong with the fact that the click prop is "extra" when the button is disabled, and I'd say it's better than changing the structure of the passed in props based on the disabled state.
当按钮被禁用时，点击道具是“额外的”这一事实并没有错，我认为这比根据禁用状态更改传入道具的结构要好。
