javascript - react radio 输入不检查

Question

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

表单

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

Answer 1

所以问题是您通过将 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 上下文并传入正确的索引。