реквизиты onclick не работают с Material UI?

Question

вот моя ситуация на React.js

У меня есть функция в моем вызове App.js selectNumberOfPeople,

затем В моем дочернем компоненте (вызов General) у меня была кнопка:

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

который отображал значение в консоли при клике.

Отлично работает.

Теперь я хочу использовать кнопку из пользовательского интерфейса материала, поэтому я должен заменить свою кнопку на:

<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

Вы также можете попробовать onClick={()=>this.props.selectedNumberOfPeople}

Answer 2

Используйте this.props.selectNumberOfPeople, а не selectedNumberOfPeople.

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