Reactjs 在“反应”中切换多个按钮

Onclick

函数执行

myChangeHandler

，它会在每次单击时将状态更改为相反。这将切换h1元素内的内容。在这里，函数执行两个按钮的更改。有没有可能改变单个按钮的行为

  class File extends React.Component {
              constructor(props) {
              super(props);
               this.state = {
               user: false,
               admin:false
            };
        
        this.myChangeHandler = this.myChangeHandler.bind(this);
      }
    
      myChangeHandler() {
        this.setState(state => ({
        user:!state.user
        admin:!state.admin
        }));
       }
        
        render() {
          return(
            <div>  <button onClick={this.myChangeHandler}>Toggle admin </button>
                 {this.state.display && <h1>admin online!</h1>} </div>
        
            <div>  <button onClick={this.myChangeHandler}>Toggle user </button>
                 {this.state.display && <h1>user online!</h1>} </div>
        )
        }
        }

类文件扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：错，
管理员：错
};
this.myChangeHandler=this.myChangeHandler.bind（this）；
}
myChangeHandler（）{
this.setState（state=>({
用户：！state.user
管理员：！state.admin
}));
}
render（）{
返回(
切换管理
{this.state.display&&admin online！}
切换用户
{this.state.display&&user online！}
)
}
}

您可以传递对函数的引用，以告知您单击了哪个按钮：

myChangeHandler（名称）{
this.setState（（prev）=>（{[name]：！prev[name]}））；
}
render（）{
返回(
this.myChangeHandler（'admin'）}>切换管理
{this.state.display&&admin online！}
this.myChangeHandler（'user'）}>切换用户
{this.state.display&&user online！}
)
}

您可以给按钮一个

名称

，并访问处理程序中的按钮：

<button name='admin' onClick={this.myChangeHandler}>Toggle admin </button>

请注意，您必须在setState之前保存id，因为setState是异步的，并且事件将在函数之后删除。因此，如果您试图在延迟设置状态期间访问事件，则名称将为null

  myChangeHandler(e) {
    const id = e.target.name
    this.setState((state) => ({
      [id]: !state[id]
    }));
  }