在JSX上onClick onToggle变量

Question

我的构造函数中有一个默认状态

this.state {
    showModal:false
}

然后如何在不声明函数的情况下切换值，但是直接在JSX中执行此操作？我发现在函数中执行它的代码太多了。只要像

那样做就可以了

render(){
    return(<div onClick={()=>this.setState({showModal:!showModal})}></div>)
}

但我在上面的JSX中遇到了语法错误错误。为什么？

Answer 1

请记住，React状态保留在this.state属性中，因此您需要引用this.state.showModal，而不是this.showModal。

正确的方法：

<div onClick={() =>
    this.setState({showModal: !this.state.showModal})}>
</div>

至于使用JSX（不声明函数）这样做，这是不可能的。 JSX 是 JavaScript。