Me gustaría saber si es posible configurar onClick en un elemento div para reaccionar en función del valor de una propiedad en mi caso canClick .
Soy consciente de que puedo verificar this.state directamente en el handler , en lugar de eso, estoy buscando una solución para implementar dentro del render .
... handler(){ } render() { const { canClick} = this.state return ( <div onClick={this.handler}>hello</div> ) } ...Pon la condición así:
onClick={canClick ? this.handler : undefined }Código de trabajo:
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>Puede tratar los atributos de los elementos (como onClick) como propiedades del objeto. Use el operador de propagación solo bajo condición, distribuya el onClick:
<div {...(canClick && { onClick: this.handler })} > hello </div><div onClick={canClick ? this.handler : undefined} /> Si opta por un valor falso diferente en lugar de undefined en este ternario (es decir, false o null ), React (actualmente) arroja la siguiente advertencia:
"Si solía omitirlo condicionalmente con onClick={condición && valor}, pase onClick={condición ? valor: indefinido} en su lugar".
Editar 2020-01-05: solo false arroja el error anterior ( Reaccionar código fuente aquí ).