javascript - 在 JSX 中 onClick 时切换变量

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。