如何有条件地添加或不点击一个div作出反应？

Question

我想知道是否可以onClick根据我的情况中的属性值设置响应中的div元素canClick.

我知道我可以直接检查this.state handler而不是我正在寻找一个内部实现的解决方案render.

...
handler(){
}

render() {
  const { canClick} = this.state
  return (
    <div onClick={this.handler}>hello</div>
  )
}
...

Answer 1

把这样的条件:

onClick={canClick ? this.handler : false or null}

工作守则:

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>

Answer 2

你可以用这个

{...(condition ? { onClick: () => {handleClick()}} : {})}

Answer 3

您可以将元素属性（如onClick）视为对象属性。使用价差运算符仅在满足条件的情况下摊开onClick：

<div
  {...(canClick && { onClick: this.handler })}
>
  hello
</div>

Answer 4

是的，您可以使用 ternaru 运算符，它将左侧评估为布尔值，如果为真，则执行右侧或后备。

<div onClick={() => canClick ? this.handler() : () => false }>hello</div>

https://stackblitz.com/edit/react-uwzn4n

Answer 5

<div onClick={canClick ? this.handler : undefined} />

如果您选择一个不同的falsy值而不是undefined此三元值（即false或null），React（当前）将引发以下警告：

“如果您以前使用onClick = {condition && value}有条件地忽略它，请改为传递onClick = {condition？value：undefined}。”