Как я могу очистить свой вклад, который имеет значение в нем?

Question

У меня есть вход, заполненный значениями, возвращенными из API, который хранится в состоянии Redux:

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

Когда я щелкаю по входу и нажимаю клавишу Backspace, чтобы очистить все поле, оно всегда заполняет значениес database.inputs.scenarioName.

Я пытался установить состояние в что-то вроде

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

, но это тоже не сработало.Мое другое предположение было бы написать отправку, чтобы изменить database.inputs.scenarioName напрямую?

Answer 1

Я достиг этого с помощью этой опоры:

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

Answer 2

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>

где находится ваш обработчик кликов?
после клика очистите вашу форму

этот переход из состояния избыточности "this.props.database."?