React - 从 Redux Store 设置受控输入值

Question

我正在对输入的 onChange 事件调度一个 redux 操作，以添加到 Redux 状态上的某个 "answers" 数组。
一切正常，Redux 存储得到更新，但问题是当设置 input 值以反映 Redux 存储中的更改时，它在控制台中给我一个错误，显示 ...

Warning: A component is changing an uncontrolled input of type number to be controlled.

这里有一个代码框来演示这个问题...

如何通过 Redux 存储而不是本地状态来控制 input？

Answer 1

如果你想控制一个输入，只需每次传递一个值给输入元素的 value 属性，比如，改变这个

QuestionAnswerInput.js

将输入组件更改为

  <input
    type="number"
    value={getInputValueFromStore(answers, questionId) || ""}
    onChange={e => handleAddNumericalAnswer(e)}
  />

有关受控组件的更多信息，请参阅 this 文章

React - set controlled input value from the Redux Store