为什么我的绑定不能在构造函数中工作

Question

我在做一个非常简单的两个按钮状态。如果我点击abutton，A组件显示，如果点击bButk，那么B组件。我正在映射通过数组的项目，以便每个项目都有自己的按钮状态。假设我点击项目1的按钮B，那么我只想要第一个项目B显示。现在所有这些都会同时被触发。我已经在构造函数中限制了它们，但我仍然无法只获得一次点击触发并显示相关组件。

class Home extends Component {


  constructor(props) {
    super(props);
    this.state = {
      lists: []
      showA: true,
      showB: false
    }
    this.aButtonHandler = this.aButtonHandler.bind(this);
    this.bButtonHandler = this.bButtonHandler.bind(this);
  }



  aButtonHandler = (e) => {
    this.setState({
      showA: true,
      showB: false 
    })
  }



  bButtonHandler = (e) => {
    this.setState({
      showA: false,
      showB: true
    })
  }




 render(){
    return (
      <div> 

       {this.state.lists.map(detail => 
        <li>{detail.id}</li>
        <button onClick={(e) => this.aButtonHandler(e)} >see A</button>
        <button onClick={(e) => this.bButtonHandler(e)} >see B</button> 

        {this.state.showA ? 
          <ComponentA />  : null
        }

        {this.state.showB ? 
           <ComponentB />  : null
         }
       )}

       </div>
      )
    }  

Answer 1

如果您想在构造函数中使用bind，则无需使用arrow函数，只需使用常规函数并将函数直接传递给onClick即可

aButtonHandler(e) { this.setState({ showA: true, showB: false }); }

bButtonHandler(e) { this.setState({ showA: false, showB: true }); }

render() {
  return (
    <div>
      {this.state.lists.map(detail => (
        <div>
          <li>{detail.id}</li>
          <button onClick={this.aButtonHandler}>see A</button>
          <button onClick={this.bButtonHandler}>see B</button>
          {this.state.showA ? <ComponentA /> : null}
          {this.state.showA ? <ComponentB /> : null}
        </div>
      ))}
    </div>
  );

Answer 2

如果使用箭头函数，则无需绑定函数。

如果您想绑定，那么将其更改为正常函数，如下所示。

aButtonHandler(e){...}
bButtonHandler(e){...}