javascript - 如何清除有值(value)的输入？

Question

我有一个输入，其中填充了从存储到 Redux 状态的 API 返回的值:

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}
/>

当我点击输入并按下退格键以清除整个字段时，它总是使用 database.inputs.scenarioName 重新填充值。

我试过将状态设置为类似

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

但这似乎也不起作用。我的另一个猜测是编写一个 dispatch 来直接更改 database.inputs.scenarioName？

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>

您的点击处理程序在哪里？
单击后清除您的表单

这个来自 redux 状态“this.props.database.”？