如何清空輸入值並重置 ReactJS 掛鈎中的 state

Question

假設我有三個輸入和一個按鈕，我想在單擊按鈕時清空輸入值。

 const [input_value,set_input_value] = useState({
     input1:'',
     input2:'',
     input3:''
 })

const inputs_handler = (e) => {
    let name= e.target.name;
    let value= e.target.value;
    input_value[name] = value;

    set_input_value(input_value);
}

const clear_input_values = () => {

  // First try

    /* 
     set_input_value({
       input1:'',
       input2:'',
        input3:''
     }) 
    */


   //SECOND TRY
    set_input_value(prevState => ({ 
    ...prevState,
        input1:'',
        input2:'',
        input3:''
    }))
  // console.log shows that the values of state didn't get empty from the first click, but does in 
     the second
    console.log(input_value)


}

<div>
  <input onChange={inputs_handler} type='text' name='input1' />
  <input onChange={inputs_handler} type='text' name='input2' />
  <input onChange={inputs_handler} type='text' name='input3' />

  <input onClick={clear_input_values} type='submit' />
</div>

我可以使用document.getElementsById(id)[0].value=''; 清空輸入的值，但我認為這不是在 React 項目中執行此操作的正確方法。

這真的讓我很困惑，如果有人提供一個清晰的示例或一個示例鏈接來解釋 state 如何工作以及何時渲染組件，我將不勝感激。 因為我相信我在使用set_inputvalues()方法之前更改了 state 值。

Answer 1

問題是 state object 突變。 您正在改變input_value並將其保存回 state 而不是返回新的 object 參考。

更新 State

set_input_value(input_value); vs set_input_value({...input_value, [name]: value });

這在現有的 state 中傳播並設置已更新輸入的鍵值對。

如果擴展語法不熟悉，通常的約定是將 state object 淺復制到新的 object 中。 useState鈎子也可以使用功能更新，如果您檢查鏈接，您會看到有關useState如何不合並到 state 更新中的注釋，就像它基於類的對應物this.setState()一樣：

筆記

與 class 組件中的setState方法不同， useState不會自動合並更新對象。 您可以通過將 function 更新程序表單與 object 擴展語法相結合來復制此行為：

 setState(prevState => { // Object.assign would also work return {...prevState, ...updatedValues}; });

您現在可能會注意到我們的解決方案不是功能更新，但擴展語法的工作方式相同。 我們可以進行標准更新的原因是因為您的 state 包含 3 個獨立變量，每次更新時您復制所有變量，然后簡單地替換其中任何一個。

當下一個state 值取決於當前 state 值時，主要使用功能更新，例如反應喜歡使用的計數器示例。

我應該指出，功能更新是一種反應約定，而擴展語法是 javascript 表達式和運算符的一部分。

清除輸入

您的第一次嘗試對於清除 state 是正確的，只要您將 state 值綁定到每個輸入。

const [input_value, set_input_value] = useState({
  input1: "",
  input2: "",
  input3: ""
});

const inputs_handler = e => {
  let name = e.target.name;
  let value = e.target.value;

  set_input_value({ ...input_value, [name]: value });
};

const clear_input_values = () => {
  set_input_value({
    input1: "",
    input2: "",
    input3: ""
  });
};

return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>

    <div>
      <input
        onChange={inputs_handler}
        type="text"
        name="input1"
        value={input_value.input1}
      />
      <input
        onChange={inputs_handler}
        type="text"
        name="input2"
        value={input_value.input2}
      />
      <input
        onChange={inputs_handler}
        type="text"
        name="input3"
        value={input_value.input3}
      />

      <input onClick={clear_input_values} type="submit" />
    </div>
  </div>
);