如何有条件地在 div 上添加或不 onClick 反应? [英] How to conditionally add or not onClick on a div in react?

问题描述

我想知道在我的例子中，是否可以根据属性的值在 div 元素上设置 onClick 来响应 canClick.

我知道我可以直接在 handler 中检查 this.state 而我正在寻找在 render 中实现的解决方案.

...处理程序(){}使成为() {const { canClick} = this.state返回 (<div onClick={this.handler}>hello</div>)}...

解决方案

把条件变成这样:

onClick={canClick ?this.handler : 未定义 }

工作代码:

class App extends React.Component {_点击(){//它不会打印值console.log('是');}使成为(){返回 (<div><div onClick={false ?this._click : undefined }>Click</div>

)}}ReactDOM.render(, 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>

I would like to know if it is possible to set onClick on a div element in react based on the value of a property in my case canClick.

I am aware that I can check this.state directly in handler instead I am looking for a solution to be implemented inside render.

...
handler(){
}

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

解决方案

Put the condition like this:

onClick={canClick ? this.handler : undefined }

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 : undefined }>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>

这篇关于如何有条件地在 div 上添加或不 onClick 反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！