为什么在 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

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

示例：

function onClick () {
  setYourState('Blabla')
}

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

Answer 2

正如@Corentin 所提到的，当你有任何输入字段并且你希望它的值在你写东西时得到改变时，你需要有一个状态，就像你有一个名称为 [=11= 的状态一样] 您需要通过 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 3

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

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

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

Why after onClick my hook is failing to update the state?

javascript

reactjs

react-hooks

use-state