onclick道具不能使用Material UI？

Question

這是我在React.js上的情況

我的App.js上有一個函數調用selectNumberOfPeople，

然后在我的子組件（調用常規）中，我有一個按鈕：

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

有沒有人對我做錯了什么有任何指導？

這將超級!!

非常感謝 ！

Answer 1

使用this.props.selectNumberOfPeople not selectedNumberOfPeople 。

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

Answer 2

你也可以試試onClick={()=>this.props.selectedNumberOfPeople}