如何清除我的輸入值？

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

但這似乎也不起作用。 我的另一個猜測是編寫一個直接更改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”開始的嗎？

Answer 2

我通過這個道具實現了它：

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