（React.js + Hooks）單擊按鈕后如何重置輸入字段？

Question

我想要做的是有一個用戶可以輸入的輸入。 單擊按鈕后，獲取該輸入並對其進行處理，並使用連接到輸入的數據庫執行一些后端操作。 我正在嘗試使用 state 掛鈎來完成此操作：onBlur，將輸入保存到 state。 單擊按鈕時，執行兩件事：1) 獲取 state 變量並將其傳遞給后端解析器，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

對於受控的 state 輸入，最常見的方法是使用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中遇到的問題。