javascript - 在 React 中，我不受控制的单选组每个单选元素仅触发一次表单的 onChange

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

The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

了解更多关于 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 来查看每次单击单选按钮时该值都会发生变化。