React - 组件正在将文本类型的受控输入更改为不受控

Question

我正在尝试对我的组件进行排序

<input type="text" value={props.filters.text} onChange={(e) => {
            props.dispatch(setTextFilter(e.target.value));
        }} />
        {console.log(props.filters.sortBy)}
        <select value={props.filters.sortBy} onChange={(e) => {
            if (e.target.value === 'date') {
                props.dispatch(sortByDate());
            } else if (e.target.value === 'amount') {
                props.dispatch(sortByAmount());
            }
        }}>
            <option value="amount">Amount</option>
            <option value="date">Date</option>
        </select>

我在选择标签时遇到错误。最初获取A component is changing a controlled input of type text to be uncontrolled props.filters.sortBy 的错误值是日期。当我尝试从下拉列表中更改它时，会发生错误。

Answer 1

你问题的根源在于你的价值<input>。如果 ReactJS 接收undefined作为输入值，则该输入被视为“不受控制”，并且您不应该将其更改为“受控制”。

这里有关于 ReactJS 中不受控制的输入的非常彻底的答案。