反应无线电输入不检查

React radio input not checking

本文关键字：不检查输入无线电更新时间：2023-09-26

>我有一个简单的表单，其中有几个未检查的单选按钮。每个按钮都附加了一个更改事件，但仍然没有任何更改。我该怎么做才能不仅捕获他们的数据，而且表示输入已选中？

表格

FormComponent = React.createClass({
  propTypes: {
    label: React.PropTypes.string,
    onChange: React.PropTypes.func
  },
  handleEvent(e) {
    let {onChange} = this.props;
    console.log(e);
  },
  render() {
    const {label} = this.props;
    return (
      <form className="lm-widget__form lm-flex-row">
        <fieldset className="lm-flex-row__column lm-h-flex-50">
          <RadioSet group='radio-group'
                    label={label}
                    radios={[
                      {
                        value: 'new',
                        checked: true,
                        changeEvent: this.handleEvent,
                        text: 'radio one'
                      },
                      {
                        value: 'old',
                        checked: false,
                        changeEvent: this.handleEvent,
                        text: 'radio two'
                      }
                    ]}
          />
        </fieldset>
      </form>
    )
  }
});

单选按钮

RadioSet = React.createClass({
  propTypes: {
    group: React.PropTypes.string.isRequired,
    label: React.PropTypes.string,
    radios: React.PropTypes.arrayOf(
      React.PropTypes.shape({
        value: React.PropTypes.string.isRequired,
        checked: React.PropTypes.bool.isRequired,
        changeEvent: React.PropTypes.func.isRequired,
        text: React.PropTypes.string.isRequired
      })
    ).isRequired
  },
  render: function () {
    const {group, label, radios} = this.props;
    const self = this;
    if (label) {
      return(
        <div className="lm-widget-form__label">
          <div className="small">{label}</div>
          <div className="segment-controls">
            {radios.map(function(radio, i){
              return (
                <div key={i} className="segment-controls__group-item">
                  <input type="radio"
                          name={self.props.group}
                          className="segment-controls__button"
                          id={`radio-${i}`}
                          value={radio.value}
                          checked={radio.checked}
                          onChange={radio.changeEvent}
                  />
                  <label htmlFor={`radio-${i}`}
                         className="segment-controls__label">
                       <span className="segment-controls__label-text">
                             {radio.text}
                       </span>
                  </label>
                </div>
              );
            })
            }
          </div>
        </div>
      )
    }
    else {
      return (
        <div className="segment-controls">
          {this.props.radios.map(function(radio, i){
            return (
              <div key={radio.value} className="segment-controls__group-item">
                <input type="radio"
                        name={self.props.group}
                        className="segment-controls__button"
                        id={`radio-${i}`}
                        value={radio.value}
                        checked={radio.checked}
                        onChange={radio.changeEvent}
                />
                <label htmlFor={`radio-${i}`}
                       className="segment-controls__label">
                     <span className="segment-controls__label-text">
                           {radio.text}
                     </span>
                </label>
              </div>
            );
          })
          }
        </div>
      );
    }
  }
});

所以问题是你告诉第一个单选按钮，每次都通过传递true来检查它。

如果我们更改您的第一段代码以使用setState这应该可以工作。

FormComponent = React.createClass({
  getInitialState() {
      return {
          checkedIndex: 0
      };
  },
  propTypes: {
    label: React.PropTypes.string,
    onChange: React.PropTypes.func
  },
  handleEvent(index, e) {
    this.setState({
        checkedIndex: index
    });
    let {onChange} = this.props;
    console.log(e);
  },
  render() {
    const {label} = this.props;
    const radios = [
                      {
                        value: 'new',
                        checked: false,
                        changeEvent: this.handleEvent.bind(this, 0),
                        text: 'radio one'
                      },
                      {
                        value: 'old',
                        checked: false,
                        changeEvent: this.handleEvent.bind(this, 1),
                        text: 'radio two'
                      }
                    ];
    radios[this.state.checkedIndex].checked = true;
    return (
      <form className="lm-widget__form lm-flex-row">
        <fieldset className="lm-flex-row__column lm-h-flex-50">
          <RadioSet group='radio-group'
                    label={label}
                    radios={radios}
          />
        </fieldset>
      </form>
    )
  }
});

另请注意，我们使用bind来维护handleEvent的this上下文并传入正确的索引。