反应:不受控制/受控的输入

Question

我正在学习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>
)
}

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

Answer 1

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

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

setInputText({text: ""}); 

您的输入文本已从其先前的结构

{
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>
)