点击弹出时不会清除状态

Question

So I have a popup that has some radio button and input fields. There's a handleClick function on the OK button that does some work with the updated state and closes the popup. I'm trying to clear the state properties once these operations are performed and the pop up closes.

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
}

Doing setState isn't updating the state when I reopen the pop up.

Answer 1

OK, try this add setstate, in the end, change the state of inputs/radio buttons to empty.

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
}

and also the radio input add checked method and pass the state to it so that if it null/empty it will be unchecked

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

Or 2nd method you can use reset() method.

add a ref to your form element like this

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