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>

但是，我有两个问题。

点击按钮时，我想先updateInput，然后处理按钮点击，所以它总是使用新值。但是，这似乎存在一些问题，可能是由于 sendData 的异步性质？
虽然 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 中遇到的问题。

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

2 个答案: