Переключатель React on onhange не привязывается при первой смене переключателя - PullRequest
Новая
       14

Переключатель React on onhange не привязывается при первой смене переключателя

0 голосов
/ 02 ноября 2018

Я работаю с реагировать на 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() функцию при успешной отправке формы, которая создает проблему. Но я не понимаю, как решить эту проблему.

1 Ответ

0 голосов
/ 02 ноября 2018 
<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

...