javascript - 如何隔离React.js上的点击事件？

Question

我研究了很长一段时间，但未能找到解决方案。我在几个按钮中有一个很棒的箭头切换，我正在尝试让它们切换。开关正在工作，但它们都在同时切换。如何将其隔离到仅被单击的组件？

我的示例很大，但我添加了这些按钮，它们几乎具有相同的功能......所以在这个示例中，我只想单击按钮来切换开始/停止文本。

class Button extends React.Component {
  constructor() {
    super();
    this.toggleState = this.toggleState.bind(this);
    this.state = {
      isActive : false
    }
  }

  toggleState() {
    this.setState({isActive:!this.state.isActive});
  }

  render() {
    return(
      <div>
         <button className={this.state.isActive ? 'active' : 'inactive'} onClick ={this.toggleState}>{this.state.isActive ? 'STOP' : 'START'}</button>
         <button className={this.state.isActive ? 'active' : 'inactive'} onClick ={this.toggleState}>{this.state.isActive ? 'STOP' : 'START'}</button>
         <button className={this.state.isActive ? 'active' : 'inactive'} onClick ={this.toggleState}>{this.state.isActive ? 'STOP' : 'START'}</button>
      </div>
    );
  }
}

ReactDOM.render(<Button />,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

原因是，您使用单个state变量来控制所有按钮。不是使用数组，而是数组的每个值都针对特定按钮。要切换 toggleState 函数内按钮的状态，请同时传递索引并使用该索引来切换特定项目。

像这样:

class Button extends React.Component {
   constructor() {
      super();
      this.state = {
         isActive : []
      }
  }
  
  toggleState(i) {
      let isActive = [...this.state.isActive];
      isActive[i] = !isActive[i];
      this.setState({isActive});
  }
  
  render() {
      return(
         <div>
            <button onClick = {() => this.toggleState(0)}>{this.state.isActive[0] ? 'STOP' : 'START'}</button>
            <button onClick = {() => this.toggleState(1)}>{this.state.isActive[1] ? 'STOP' : 'START'}</button>
            <button onClick = {() => this.toggleState(2)}>{this.state.isActive[2] ? 'STOP' : 'START'}</button>
        </div>
     );
  }
}

ReactDOM.render(<Button/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>