javascript - onclick Prop 不适用于 Material UI？

Question

这是我在 React.js 上的情况

我的 App.js 中有一个函数调用 selectNumberOfPeople，

然后在我的子组件中(调用 General)我有一个按钮:

<button className="selectedNumberOfPeopleButton" onClick={this.selectedNumberOfPeople} value="1">
      1
</button>

它在点击时在控制台中显示值。

完美运行。

我现在想使用 Material UI 中的按钮，所以我将按钮替换为:

<RaisedButton className="selectedNumberOfPeopleButton" 
    onClick={this.props.selectedNumberOfPeople}
    value="1" 
    label="1" 
    labelPosition="before"
    primary={true}
/>

但是当使用这个时，该值不再显示在控制台中。 . .

虽然函数在父组件中，但我确实传递了它:

<General selectNumberOfPeople={this.selectNumberOfPeople} selectedPanel={this.showPanelAndHideOthers} />

我尝试像这样更新我的子组件 (General.js):

<RaisedButton selectNumberOfPeople={this.props.selectNumberOfPeople}
    className="selectedNumberOfPeopleButton" 
    onClick={this.props.selectedNumberOfPeople}
    value="1" 
    label="1" 
    labelPosition="before"
    primary={true}
/>

但是还是不行....

供您引用，

selectNumberOfPeople 在 App.js 中为

selectNumberOfPeople(value) {
console.log('select number of people');
// update the state and provide a callback handler to be called after the state is updated.
// referencing the state before the call back function
// () => {
//   console.log(this.state.numberOfPeople)
// })
// will leave the state with the same value as before the setState function is called.
this.setState(
  {
    numberOfPeople: value,
  },
  () => {
    console.log(this.state.numberOfPeople);
  }
);

在我的 general.js(子组件)中

selectedNumberOfPeople(e) {
  this.props.selectNumberOfPeople(e.target.value);

  const list = document.getElementsByClassName('selectedNumberOfPeopleButton');
  for (let i = 0; i < list.length; i++) {
    list[i].classList.remove('hover');
  }

  this.toggleSelectedButtonState(e);
}

有人对我做错了什么有任何指导吗？

会 super 棒!!

非常感谢!

Answer 1

使用 this.props.selectNumberOfPeople 而不是 selectedNumberOfPeople。

 <RaisedButton
   className="selectedNumberOfPeopleButton" 
   onClick={this.props.selectNumberOfPeople}
   value="1" 
   label="1" 
   labelPosition="before"
   primary={true}
/>