javascript 如何有条件地在 div 上添加或不 onClick 反应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48223852/
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
How to conditionally add or not onClick on a div in react?
提问by Radex
I would like to know if it is possible to set onClickon a div element in react based on the value of a property in my case canClick.
我想知道是否可以onClick根据我的情况下的属性值在反应中设置div 元素canClick。
I am aware that I can check this.state directly in handlerinstead I am looking for a solution to be implemented inside render.
我知道我可以直接检查 this.statehandler而我正在寻找要在里面实现的解决方案render。
...
handler(){
}
render() {
const { canClick} = this.state
return (
<div onClick={this.handler}>hello</div>
)
}
...
回答by Mayank Shukla
Put the condition like this:
把条件写成这样：
onClick={canClick ? this.handler : false or null}
Working Code:
工作代码：
class App extends React.Component {
_click(){
// it will not print the value
console.log('yes');
}
render(){
return (
<div>
<div onClick={false? this._click: null}>Click</div>
</div>
)
}
}
ReactDOM.render(<App />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>回答by jorbuedo
You can treat the elements attributes (like onClick) as object properties. Use the spread operator to only on condition, spread the onClick:
您可以将元素属性（如 onClick）视为对象属性。使用传播运算符仅在条件下传播 onClick：
<div
{...(canClick && { onClick: this.handler })}
>
hello
</div>
回答by tomvalorsa
<div onClick={canClick ? this.handler : undefined} />
If you opt for a different falsy value instead of undefinedin this ternary (i.e. falseor null) React (currently) throws the following warning:
如果你选择一个不同的 falsy 值而不是undefined在这个三元（即false或null）中，React（当前）会抛出以下警告：
"If you used to conditionally omit it with onClick={condition && value}, pass onClick={condition ? value : undefined} instead."
“如果您曾经使用 onClick={condition && value} 有条件地省略它，请改为传递 onClick={condition ? value : undefined}。”
Edit 2020-01-05: only falsethrows the above error (React source code here).
编辑 2020-01-05：仅false抛出上述错误（此处为 React 源代码）。
回答by Mosè Raguzzini
Yes you can with ternaru operator, which evaluates the left side as boolean and if true it executes the right side or the fallback.
是的，您可以使用 ternaru 运算符，它将左侧评估为布尔值，如果为真，则执行右侧或后备。
<div onClick={() => canClick ? this.handler() : () => false }>hello</div>
回答by Marlon Allan Supetran
This is how I would do it:
这就是我将如何做到的：
onClick={(canClick && this.handler) || null}
回答by Binit Ghetiya
You can add Conditional Operatorfor this kind of purpose.
您可以为此目的添加条件运算符。
handler(){
}
render() {
const { canClick} = this.state
return (
<div>
{
(canClick) ?
(<div onClick={this.handler}>clickble</div>) :
(<div>not clickble</div>)
}
</div>
)
}
Here is document example for that reactjs.org/docs/conditional-rendering
