无线电输入onChange只会触发一次？

Question

我有一个简单的任务，我试图完成：每当单选按钮在组之间切换时触发一个函数。

class App extends Component { 
    onButtonClick() { 
     console.log('something was clicked!') 
    } 

    return (
     <div> 
     <button onClick={this.onButtonClick.bind(this)}> 
      Click me 
     </button> 
     <input 
      type="checkbox" 
      onChange={this.onButtonClick.bind(this)} 
     /> 
     <input 
      type="radio" 
      value="yes" 
      name="answer" 
      onChange={this.onButtonClick.bind(this)} 
     /> 
     <input 
      type="radio" 
      value="no" 
      name="answer" 
      onChange={this.onButtonClick.bind(this)} 
     /> 
     </div> 
    ) 
} 

按钮和复选框工作得很好。如果你点击它，它会多次触发该功能。单选按钮触发一次然后停止。

就好像ReactJS由于某种原因停止收看单选按钮的onChange一样。任何帮助将不胜感激。谢谢！

UPDATE

现在看来似乎正常工作在https://codesandbox.io/s/rGMGzJNL，但不是在我的本地环境，这是完全令人费解的正常工作。如果我知道发生了什么，将会更新，但如果有人遇到过这种情况，希望得到任何指导！

Answer 1

您需要在每个无线电台上设置选中的属性并将状态保存为无线电状态。

class App extends Component { 
    state = { 
    radio: 'yes', 
    } 

    onButtonClick() { 
    console.log("something was clicked!"); 
    } 

    onRadioChange(value) { 
    console.log("radio change"); 
    this.setState({ 
     radio: value, 
    }) 
    } 

    render() { 
    return (
     <div> 
     <button onClick={() => this.onButtonClick()}> 
      Click me 
     </button> 
     <input type="checkbox" onClick={() => this.onButtonClick()} /> 
     <input 
      type="radio" 
      value="yes" 
      name="answer" 
      checked={this.state.radio === 'yes'} 
      onChange={(e) => this.onRadioChange('yes')} 
     /> 
     <input 
      type="radio" 
      value="no" 
      name="answer" 
      checked={this.state.radio === 'no'} 
      onChange={(e) => this.onRadioChange('no')} 
     /> 
     </div> 
    ); 
    } 
}