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绑定到this.props.formValues对象的条目：

我需要传入默认值
当用户点击＆＃34; reset＆＃34;时，我需要能够重置输入字段。按钮。此重置按钮触发redux操作，导致作为prop传入的formValues对象发生更改

处理组件链的onChange事件处理程序触发redux操作，该操作更新驱动传入的formValues对象的存储状态作为prop。

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

警告：InputSection正在更改文本类型的不受控制的输入被控制。输入元素不应从不受控制的方式切换控制（反之亦然）。决定使用受控制的还是组件寿命的不受控制的输入元素。

我想这是因为我的输入组件正在被管理＆＃34; （因为我正在约束它value）。但是，如果我无法绑定它value如何设置它的初始值或稍后重置该值？

Answer 1

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

您需要确保传入的初始值不是undefined。

输入字段需要受控制和不受控制

1 个答案: