Question

编辑：这实际上是React中的一个错误。它影响React 15.6.1，但不 React 15.1.0。 https://github.com/facebook/react/issues/10078

我将change事件监听器附加到我的父form元素，其中包含不受控制的input type="radio"元素。我希望每次选择一个无线电选项时都会调用表单的change事件监听器。

相反，侦听器仅为每个单独的无线电选项调用一次。对于无线电选项的任何后续更改，虽然在浏览器中可见，但不会触发change事件。

我做错了什么？

这是一个Codepen，它在控制台中演示了这一点：https://codepen.io/yeahjohnnn/pen/yoxqpL

以下是代码：

class MyExample extends React.Component {
  handleFormChange(event) {
    console.log('Form change. Value: ', event.target.value);
  }

  render() {
    return (
      <form onChange={this.handleFormChange}>
        <label>
          Text
            <input type="text" name="textbox-field" />
        </label>
        <label>
          <input type="radio" name="radio-button-group" value="a" /> A
        </label>
        <label>
          <input type="radio" name="radio-button-group" value="b" /> B
        </label>
        <label>
          <input type="radio" name="radio-button-group" value="c" /> C
        </label>
      </form>
    );
  }
}

Answer 1

当用户提交对元素值的更改时，会为<input>，<select>和<textarea>元素触发更改事件。 与输入事件不同，对元素值的每次更改都不一定会触发更改事件。

详细了解MDN Web docs

在这种情况下使用Click事件更可靠。

将onClick侦听器附加到每个单选按钮。像这样：

class MyExample extends React.Component {
  handleFormChange(event) {
    console.log('Form change. Value: ', event.target.value);
}

render() {
  return (
    <form>
      <label>
        Text
        <input type="text" name="textbox-field" />
      </label>
      <label>
        <input type="radio" name="radio-button-group" value="a" 
          onClick={this.handleFormChange}/> A
      </label>
      <label>
        <input type="radio" name="radio-button-group" value="b" 
          onClick={this.handleFormChange}/> B
      </label>
      <label>
        <input type="radio" name="radio-button-group" value="c" 
          onClick={this.handleFormChange}/> C
      </label>
    </form>
    );
  }
}

ReactDOM.render(<MyExample />, document.getElementById('app'));

您可以打开DevTools以查看每次单击单选按钮时值都会更改。

Answer 2

您的表单未收到更改事件，因为收音机的已检查属性未更改（或React不知道该值何时更改）。正确的方法是我们处理所选的单选按钮值，然后将该值传递给单选按钮的checked prop。

我的代码：

const RadioButton = ({ onChange, value, checked, text }) => (
  <label>
    <input type="radio" name="radio-button-group" value={value} onChange={onChange} checked={checked} /> {text}
  </label>
);

const RadioGroup = ({ onChange, value, options }) => (
  <div>
    {options.map(option => (
      <RadioButton {...option} checked={option.value === value} onChange={onChange} />
    ))}
  </div>
);

class MyExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRadio: null,
    };
    this.onRadioChange = this.onRadioChange.bind(this);
  }

  onRadioChange(event) {
    this.setState({ selectedRadio: event.target.value });
  }

  handleFormChange(event) {
    console.log('Form change. Value: ', event.target.value);
  }

  render() {
    return (
      <form onChange={this.handleFormChange}>
        <label>
          Text
            <input type="text" name="textbox-field" />
        </label>
        <RadioGroup
          value={this.state.selectedRadio}
          onChange={this.onRadioChange}
          options={[
            { value: 'a', text: 'A' },
            { value: 'b', text: 'B' },
            { value: 'c', text: 'C' },
          ]}
        />
      </form>
    );
  }
}

ReactDOM.render(<MyExample />, document.getElementById('app'));

以下是完整代码https://codepen.io/phthhieu/pen/BdOPge

在React中，我的不受控制的无线电组仅在每个无线电元素

2 个答案: