切换多个按钮的反应

Question

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>
        )
        }
        }

Answer 1

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

myChangeHandler(name) {
  this.setState((prev) => ({ [name]: !prev[name] }));
}
        
render() {
 return(
  <div>
    <button onClick={() => this.myChangeHandler('admin')}>Toggle admin </button>
     {this.state.display && <h1>admin online!</h1>}
  </div>
        
  <div>
    <button onClick={() => this.myChangeHandler('user')}>Toggle user</button>
    {this.state.display && <h1>user online!</h1>}
  </div>
 )
}

Answer 2

您可以给按钮一个 name 并在处理程序中访问它们：

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

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

注意在setState之前一定要保存id，因为setState是async的，函数之后会移除事件。因此，如果您尝试在延迟的 setState 期间访问事件，则名称将为 null。

Sandbox

切换多个按钮的反应

Toggle in react for multiple buttons

button

toggle

reactjs