Question

反应我试图制作一个按钮，该按钮将显示使用react状态单击的次数。但是我想用很多组件来做到这一点。所以我在父组件中用setState编写了状态和更新函数，并希望将状态作为道具传递，但是问题是因为我传递了一次状态，然后在状态更新后（单击按钮时），道具没有对此进行更新。我看不到按钮被点击了多少次。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 2,
    };
  }
  clickCount() {
    this.setState((prev) => {
      return { count: prev.count + 1 };
    })
  }

  render() {
    return (
      <div>
        <MainContent 
        handler={this.clickCount}  totalCount={this.state.count}/>
      </div>
    );
  }
}

export default App;

Answer 1

您似乎错过了将该功能绑定到 this

class App extends Component {
     constructor(props) {
          super(props);
          this.state = {
               count: 2,
          };
          this.clickCount = this.clickCount.bind(this); // you may have missed this..
     }
clickCount() {
this.setState((prev) => {
  return { count: prev.count + 1 };
})
}
render() {
     return (
          <div>
               <MainContent handler={this.clickCount}  totalCount={this.state.count}/>
          </div>
      );
}
}
export default App;

如何通过道具传递状态，该状态随后会随着click事件更新（并同时保持状态更新）

1 个答案: