Javascript 无线电输入onChange仅触发一次？

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

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

类应用程序扩展组件{
onButtonClick（）{
console.log（'单击了某些内容！'）
}
返回(
点击我
)
}

按钮和复选框工作正常。如果您单击它，它会多次触发该函数。单选按钮启动一次，然后停止

这几乎就像ReactJS出于某种原因停止监视onChange for单选按钮。任何帮助都将不胜感激。谢谢大家!

更新

---

它似乎可以正常工作，但不能正常工作，在我当地的环境，这是完全令人困惑。如果我弄清楚发生了什么，我会更新，但是如果有人之前遇到过这种情况，我会感谢任何指导

您需要在每个收音机上设置checked属性，并将收音机状态保存为state

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

类应用程序扩展组件{
状态={
电台：“是的”，
}
onButtonClick（）{
log（“有东西被点击了！”）；
}
onRadioChange（值）{
控制台日志（“无线电更改”）；
这是我的国家({
无线电：价值，
})
}
render（）{
返回(
this.onButtonClick（）}>
点击我
this.onButtonClick（）}/>
此.onRadioChange（'yes'）}
/>
this.onRadioChange（'no'）}
/>
);
}
}

尝试将处理程序绑定移动到构造函数中

this.handleEddingRSVP.bind（this）

不会改变任何东西。让我举个简单的例子来帮助说明这个问题。尝试使用

onclick

作为事件-在原生JS中，您不能使用

onchange

您的JSX（return）应该只返回1个节点，这可能会导致问题。也许把所有这些都放在一个div里，我觉得这是对onChange是如何被检测到的一种误解。谢谢你澄清这一点！