javascript - 在JSX中在onClick时切换变量

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

this.state {
    showModal:false
}

那么如何在不声明函数的情况下切换值，而直接在JSX中呢？我发现在一个函数中执行它的代码太多了。像这样做会不会更简单

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

但是我上面的JSX中出现语法错误的错误。为什么？

最佳答案

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

正确的方法是：

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

至于仅使用JSX（不声明函数）来做到这一点，那是不可能的。 JSX是JavaScript。