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变量来控制所有按钮。而不是使用array，array的每个值都将用于特定按钮。要在toggleState函数内切换按钮的状态，也要传递索引并使用该索引切换特定项目。

像这样：

＆＃13;

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'));

＆＃13;

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

＆＃13;

如何在React.js上隔离click事件？

1 个答案: