组件正在更改要控制的文本类型的不受控输入

Question

警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控切换到受控（反之亦然）。在组件的生命周期内决定使用受控输入元素还是不受控输入元素。*

^ 当我按下编辑按钮时弹出此错误，

有什么建议吗？

代码：

render() {
    const {isEditMode} = this.state;
    const {todoItem, submitEdit, deleteItem} = this.props;

    return <li>
        {
            isEditMode ? (
                <div>
                    <input
                        ref={this.inputRef}
                        defaultValue={todoItem.todo} type={'text'}
                    />
                    <button
                        onClick={() => {
                            submitEdit(todoItem._id, this.inputRef.current.value);
                            this.setState({isEditMode: !isEditMode})
                        }}
                        className={'btn btn-primary'}
                    >
                        Submit
                    </button>
                    <button
                        onClick={() => {
                            this.setState({isEditMode: !isEditMode})
                        }}
                        className={'btn btn-primary'}
                    >Cancel
                    </button>
                </div>
            ) : (
                <div>
                    <input ref={this.btnRef} onClick={() => this.props.checkSingleCheckBox(todoItem._id)} type={'checkbox'} checked={todoItem.checked}/>
                    <label>
                        {todoItem.todo}
                    </label>
                    <button onClick={() => {
                        deleteItem(todoItem._id)
                    } } className={'btn btn-primary'}>Delete
                    </button>
                    <button onClick={() => this.setState({isEditMode: !isEditMode})} className={'btn btn-primary'}>Edit
                    </button>
                </div>
            )
        }
    </li>

}

}

Answer 1

使用value 代替defaultValue：

value={todoItem.todo}

defaultValue 仅用于初始/常量值。保留它不会让您更改value。所以，更新那个引用元素的状态，你会得到这样的错误：改变一个不受控制的文本类型的输入来控制

这样我无法更改输入字段的值

您需要绑定onChange 事件来触发输入值的更改。