如何清空输入值并重置 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>
);