私の非制御ラジオグループは、フォームのonChangeを無線要素ごとに1回だけトリガーします

Question

EDIT：これは実際にはReactのバグです。これはReact 15.6.1に影響しますが、ではなく、 React 15.1.0です。 https://github.com/facebook/react/issues/10078

は、わたしはあなたに制御されていないinput type="radio"要素が含まれている私の親form要素にchangeイベントリスナーを付けています。私は、フォームのchangeイベントリスナーは、ラジオオプションの1つが選択されるたびに呼び出されると考えています。

リスナーは、の各ラジオオプションに対して一度だけが呼び出されます。ラジオ・オプションのその後の変更は、ブラウザに表示されている間は、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

ラジオのchecked属性が変更されていない（または、Reactが値が変更されたときにReactが認識しない）ため、フォームはchangeイベントを受信しません。 正しい方法は、ラジオボタンの選択値を処理し、その値を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