javascript - React 单选按钮 onChange 事件不会在单选按钮的第一次更改时绑定(bind)

Question

我正在使用 React js，在单选按钮 onChange 事件绑定(bind)上发现了一个奇怪的问题。 我的页面在单击按钮时打开一个弹出窗口，其中一个新组件绑定(bind)在该弹出窗口中。在这个新组件中，我创建了 2 个 radio buttons 并在更改该单选按钮时隐藏/显示 div。下面是我的代码。

 class component1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent: true
   };
  }
  handleChange = () => {
    this.setState({
      showComponent: !this.state.showComponent,
    });
  }
  render() {
   return(
   <div>
    <input type='radio' name='a' onChange={self.handleChange} defaultChecked/>
    <input type='radio' name='a' onChange={self.handleChange}/>
     {this.state.showComponent && (<div>Hide or show based on state change</div>)}
   </div>
  );
 }
}

当我第一次打开弹出窗口时，它工作正常。提交表单和弹出窗口关闭后，它的行为可能会发生变化。下次我在没有父页面刷新的情况下打开弹出窗口时，在第一次更改单选按钮时它不会调用 handleChange 函数。从第二次点击开始，它就可以正常工作。

我认为，onSubmit 我在成功提交表单时调用了 form.reset() 函数，这会产生问题。但我不明白如何解决这个问题。

Answer 1

<input type='radio' name='a' onChange={this.handleChange} checked={!this.state.showComponent} />
<input type='radio' name='a' onChange={this.handleChange} checked={this.state.showComponent}/>

这将以一种受控的方式工作，而不是依赖于事件和 defaultChecked

https://codesandbox.io/s/5z40rj836l