ポップアップをクリックしても状態がクリアされない

bugfix> javascript > 投稿

そのため、ラジオボタンと入力フィールドのあるポップアップがあります。 handleClick があります OK の関数更新された状態でいくつかの作業を行い、ポップアップを閉じるボタン。これらの操作が実行されてポップアップが閉じたら、状態プロパティをクリアしようとしています。

handleClick = () => {
  if(this.state.val === "1") {
    //do something
  } else if (this.state.val === "2") {
    //do something
  }
  //once if conditions are performed, clear the state
  this.setState({val: "0"}); //this is what i do right now
}

setState を行うポップアップを再度開いたときに状態が更新されません。

javascript

reactjs

回答 1 件

  • OK、setstateを追加してみてください。最後に、inputs/radioボタンの状態を空に変更します。

    handleClick = () => {
  if(this.state.val === "1") {
    //do something
  } else if (this.state.val === "2") {
    //do something
  }
  //once if conditions are performed, clear the state
  this.setState({val: "" or null }); //keep it empty or null
}

    また、ラジオ入力はチェックされたメソッドを追加し、それに状態を渡します。これにより、null /空の場合はチェックされません

    <input type="radio" checked={this.state.val} />

    または、2番目のメソッドとして、reset（）メソッドを使用できます。

    このようなフォーム要素にrefを追加します

    <form ref={(input) => this.resetForm = input}></form>
handleClick = () => {
  if(this.state.val === "1") {
    //do something
  } else if (this.state.val === "2") {
    //do something
  }
  //Use the ref to target the form and apply reset method to it
  this.resetForm.reset();
}

あなたの答え

関連記事