我正在使用react js，并在单选按钮onChange事件绑定中发现了一个奇怪的问题。
我的页面在按钮单击上打开一个弹出窗口，新组件绑定在该弹出窗口中。在这个新组件中，我创建了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()函数，这正在产生问题。但是我不知道如何解决这个问题。