Как решить Ошибка, когда `onChange` не используется в компоненте переключателя

Question

Я использую этот компонент для переключателя, но когда я не использую Onchange, у меня появляется следующая ошибка на странице для onUpdate иногда.

TypeError: this.props.onUpdate не является функцией

onChange(e) {
  let value = e.target.value;
  this.setState({value: value} , this.props.onUpdate(value));
}


render() {
  return (
    <div className="text-right mt-3">   
    {this.props.items.map(item => {
       return (    
          <label key={item.value}  className="c-radioLabel" htmlFor={item.value}>
            <input
              className="c-radio"
              type='radio'
              checked={this.state.value === item.value}
              disabled={item.disabled}
              value={item.value}
              name={this.props.name}
              onChange={this.onChange.bind(this)}
              onClick={this.props.onClick} />
            <span className="mr-3 ">{item.label}</span>
          </label>
        );
      })}
    </div>

Answer 1

Я думаю, это связано с привязкой:

onChange = value => {
 //whatever you're doing with value.
}

render() {
  return (
    <RadioButton
       required
       title="Test"
       onUpdate={this.onChange}
       ref="test"
       items={[{value: "YES", label: "yes"}, {value: "NO", label: "no"}]} 
       name="opt-group3"
       className="radio-group"
     /> 
   )
}

А в дочернем компоненте измените привязки таким образом. Не используйте .bind(this) в рендере. Когда вызывается render (), this.onChange.bind (this) будет вызываться для привязки обработчика. Всякий раз, когда состояние изменяется, это будет генерировать совершенно новые обработчики!

onChange = (e) => {
  let value = e.target.value;
  this.setState({ value: value }, () => this.props.onUpdate(value));
}


render() {
  return (
    <div className="text-right mt-3">   
    {this.props.items.map(item => {
       return (    
          <label key={item.value}  className="c-radioLabel" htmlFor={item.value}>
            <input
              className="c-radio"
              type='radio'
              checked={this.state.value === item.value}
              disabled={item.disabled}
              value={item.value}
              name={this.props.name}
              onChange={event => this.onChange(event)}
              onClick={this.props.onClick} />
            <span className="mr-3 ">{item.label}</span>
          </label>
        );
      })}
    </div>
  )
}

Вы не столкнетесь с ошибкой this.props.onUpdate is not a function, если привязки обработаны правильно.