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

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

Sandbox

切换反应多个按钮

2 个答案: