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错误。

单选按钮组件

1 个答案: