react.js - react中的jsx语法有一个onclick事件，可以直接执行setstate方法吗？

问题描述

问 题

突然想问一个问题，能不能在react的render-return中，返回一个标签的onclick方法中直接执行this.setState方法？
因为看到大部分都是现在外部声明一个函数，然后在onclick中调用，所以很好奇，能不能实现？

声明：
close: function() {
    this.setState({active : false})
}



render-return：

<div id="close-search" onClick={this.close}></div>

想直接实现
<div id="close-search" onClick={this.setState({active : false})}></div>
类似这种的实现。

解决方案

当然可以啊，花括号里就是js。随便你怎么写，只是这样写很不友好。逻辑控制应该提取出来。

class App extends React.Component{

  constructor(){
    super();
    this.state = {
      var : 6666
    }
  }
  
  render(){
    return <div onClick={()=>{this.setState({var:3333})}}>{this.state.var}</div>
  }
}

render(<App />, document.getElementById('root'));

这篇关于react.js - react中的jsx语法有一个onclick事件，可以直接执行setstate方法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！