javascript - 输入字段需要受控和非受控

Question

我有一个输入字段，其呈现如下:

class InputSection extends Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
    }

    handleChange(event) {
        this.props.onChange(event.target.name, event.target.value);
    }

    render() {
        return (
            <input type="text"
                name="topicInputText"
                value={this.props.formValues['topicInputText']}
                onChange={this.props.onChange}
            />
        );
    }
}

我将 value 绑定(bind)到 this.props.formValues 对象的条目有两个(感知的)原因:

1. 我需要传入默认值
2. 我需要能够在用户单击“重置”按钮时重置输入字段。此重置按钮会触发 redux 操作，从而导致作为 prop 传入的 formValues 对象发生变化

在组件链上处理的 onChange 事件处理程序会触发一个 redux 操作，该操作会更新驱 Action 为 prop 传入的 formValues 对象的存储状态.

但是当我使用键盘输入输入字段时，我收到此控制台警告:

Warning: InputSection is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

我想这是因为我的输入组件正在被“管理”(因为我绑定(bind)了它的值)。但是，如果我无法绑定(bind)它的值，我该如何设置它的初始值或稍后重置该值？

Answer 1

这通常意味着您要在给定未定义值和给定值之间切换。我猜测首次渲染时 formValues["topicInputText"] 不存在。

您需要确保传入的初始值不是未定义。