javascript - 为什么在 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)}
/>

我现在有一个按钮，onclick 应该清除表单中的字符串输入：

<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

要使用钩子更改输入的值，您必须在输入中初始化您的状态，如“值”。

例子 ：

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

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

Answer 3

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

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