Question

我正在做一个非常简单的两个按钮状态。如果我单击abutton，将显示A组件，如果单击bbutton，则将显示组件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

如果使用箭头功能，则无需绑定功能。

如果要绑定，则将其更改为常规功能。

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

Answer 2

如果要在构造函数中使用绑定，而无需使用箭头函数，只需使用常规函数并将该函数直接传递给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>
  );

为什么我的绑定在构造函数中不起作用

2 个答案: