为什么onClick之后我的钩子无法更新状态

Question

我已经定义了一个常量来使用ReactJS中的UseState Hook：

const [inputValue, setInputValue] = useState("")

以某种方式使用表单的inputValue：

<form
data-testid="form"
onSubmit={e => {
e.preventDefault();
setLogFilters({
queryText: inputValue
});
}}
>

我可以使用下面的代码段在表单中输入字符串：

<Input
name="input1"
type="text"
onChange={e => setInputValue(e.target.value)}
/>

我现在有一个按钮，点击它应该可以清除表单中的字符串输入：

<Button
onClick={() => {
setInputValue("");
}}
>

但是表单保留了原始字符串，并且状态没有设置为空字符串。怎么了？为什么钩子不能更新状态？

Answer 1

正如@Corentin所说，当你有任何输入字段，并且你想在写东西时改变它的值时，你需要有一个状态，就像你有一个名为inputValue的状态一样您需要通过value道具(即(将此状态与您的输入绑定

<Input
//This will change your input when your state will be updated
value = {inputValue} 
name="input1"
type="text"
onChange={e => setInputValue(e.target.value)}
/>

现在，当您设置inputValue状态时，该值将发生更改。

Answer 2

您的输入字段没有value属性，应该如下所示：

<Input
name="input1"
type="text"
value={inputValue}
onChange={e => setInputValue(e.target.value)}
/>

Answer 3

要用钩子更改输入的值，必须像输入中的"value"一样初始化状态。

示例：

function onClick () {
setYourState('Blabla')
}
<input placeholder='Enter blabla' value={yourState} onChange={(e) => setYourState(e.target.value)}></input>