如何清除我的输入值？

Question

I have an input that's populated with values returned from an API that's stored into Redux state:

state = {
  popoverScenarioName: null,
}

scenarioNameChange = (e) => (
  this.setState({popoverScenarioName: e.target.value})
)

// ....

<StyledInput
  placeholder="Scenario Name"
  onChange={(e) => scenarioNameChange(e)}
  onFocus={(e) => e.target.select()}
  value={this.state.scenarioName || database.inputs.scenarioName}
/>

When I click into the input and hit backspace to clear the entire field, it always repopulates the value with database.inputs.scenarioName .

I've tried setting state to something like

state = {
  popoverScenarioName: null || this.props.database.inputs.scenarioName,
}

but that didn't seem to work neither. My other guess would be to write a dispatch to change database.inputs.scenarioName directly?

Answer 1

state = {
   popoverScenarioName: null,
}

scenarioNameChange = (e) => (
   this.setState({popoverScenarioName: e.target.value})
 )

 clickHandler = () => {
    //...doing something here
    setState({popoverScenarioName: null})
 }

<StyledInput
  placeholder="Scenario Name"
  onChange={(e) => scenarioNameChange(e)}
  onFocus={(e) => e.target.select()}
  value={this.state.popoverScenarioName}
 />

<button onClick={this.clickHandler}>add todo</button>

where is your click handler?
after click clear your form

this one going from redux state "this.props.database."?

Answer 2

我通过这个道具实现了它：

scenarioName={this.state.popoverScenarioName === null ? database.inputs.scenarioName : this.state.popoverScenarioName}