反应：不受控制/受控输入答案

【问题标题】：React: uncontrolled/controlled input反应：不受控制/受控输入
【发布时间】：2020-08-27 00:08:28
【问题描述】：

我正在学习 React，我创建了一个非常简单的“购物清单应用程序”。现在一切正常，但我收到此错误：“警告：组件正在更改要控制的文本类型的不受控输入。输入元素不应从不受控切换到受控（反之亦然）。决定使用受控还是组件生命周期内不受控制的输入元素”。

这是我的代码：

function InputArea(props) {

    const [inputText, setInputText] = useState({
       inputText: {text: ""}
    });

    function handleChange(event){
        setInputText(event.target.value);
    }

    function handleClick(event) {
        props.onSubmit(inputText);
        setInputText({text: ""});
        event.preventDefault();
    }

    return(
             <div className="input-group w-50">
                <input 
                    type="text" 
                    className="form-control" 
                    onChange={handleChange} 
                    ariadescribedby="button-addon" 
                    value={inputText.text} 
                    placeholder="Insert Item">
                </input>
            <div className="input-group-append">
                <Button
                    id="button-addon"
                    color="dark"
                    style={{marginBottom: "2rem"}} 
                    onClick={handleClick}>Add Item
                </Button>
            </div>
        </div>
    )
}

当我想重置我的输入以查看占位符而不是最后添加的项目的名称时，会出现问题。

【问题讨论】：

标签： reactjs react-native components react-hooks

【解决方案1】：

问题在于您如何更新状态、如何使用状态以及如何初始化它。

与类中的 setState 不同的钩子，状态更新器的值不会合并而是替换，当你运行时

setInputText({text: ""});

您的 inputText 已从其以前的结构替换

{
   inputText: {text: ""}
}

导致你的错误

由于您使用inputText.text 设置输入字段的值，因此您也必须以这种方式初始化状态

const [inputText, setInputText] = useState({
   text: ""
}); // initialise as an object

function handleChange(event){
    setInputText({ text: event.target.value }); // update the state object with text field
}

function handleClick(event) {
    props.onSubmit(inputText);
    setInputText({text: ""});
    event.preventDefault();
}

return(
         <div className="input-group w-50">
            <input 
                type="text" 
                className="form-control" 
                onChange={handleChange} 
                ariadescribedby="button-addon" 
                value={inputText.text} 
                placeholder="Insert Item">
            </input>
        <div className="input-group-append">
            <Button
                id="button-addon"
                color="dark"
                style={{marginBottom: "2rem"}} 
                onClick={handleClick}>Add Item
            </Button>
        </div>
    </div>
)

【讨论】：