（React.js + Hooks）单击按钮后如何重置输入字段？

Question

我想要做的是有一个用户可以输入的输入。单击按钮后，获取该输入并对其进行处理，并使用连接到输入的数据库执行一些后端操作。我正在尝试使用状态挂钩来完成此操作：onBlur，将输入保存到状态中。单击按钮时，做两件事：1）获取状态变量并将其传递给后端解析器，2）清除输入字段，使其为空，并且仅存在占位符文本。

我有这个代码：

const [inputVal, setInputVal] = useState("");

updateInput = (e) => {
    const val = e.target.value;
    setInputVal(val);
}

sendData = async () => {
    //handle async backend processing with inputVal
    setInputVal("");
    //rerender
}


<Button className="input-button" onClick={sendData}>Send Data</Button>
<input className="input-field" placeHolder="Input name." defaultValue={inputVal} onBlur=(updateInput)></input>

但是，我有两个问题。

1. 在按钮点击时，我想先更新输入，然后处理按钮点击，所以它总是使用新值。但是，这似乎存在一些问题，可能是由于 sendData 的异步特性？

2. 虽然 inputVal 可能是一个空字符串，但出于某种原因，输入框中的值不会重置为空，它会保持原样（尽管内部数据仍然有 inputVal = 0）。并且 onBlur 会重新更新 inputVal。

Answer 1

对于受控状态输入，最常见的方法是使用onChange 而不是onBlur。这也可以避免您与模糊和点击事件的冲突。你也可以将inputVal 传递给value 输入的属性。

  const [inputVal, setInputVal] = useState("");

  const updateInput = (e) => {
    const val = e.target.value;
    setInputVal(val);
  }

  const sendData = async () => {
    //handle async backend processing with inputVal
    setInputVal("");
    //rerender
  }

  return (
    <>
      <button className="input-button" onClick={sendData}>Send Data</button>
      <input className="input-field" onChange={updateInput} placeHolder="Input name." value={inputVal}/>
    </>
  );

Answer 2

首先，将 defaultValue 更改为 value={inputVal}，因为它是受控输入。 其次，请详细说明您在1中遇到的问题。