如何在 ReactJS 挂钩中清空输入值和重置状态

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 项目中执行此操作的正确方法。

这真的让我很困惑，如果有人提供一个清晰的示例或一个示例的链接来解释状态如何工作以及何时渲染组件，我将不胜感激。因为我相信我在使用set_inputvalues() 方法之前更改了状态值。

Answer 1

问题是状态对象突变。您正在改变 input_value 并将其保存回状态，而不是返回新的对象引用。

更新状态

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

这在现有状态中传播并设置已更新输入的键值对。

如果不熟悉扩展语法，通常将状态对象浅拷贝到新对象中。 useState 钩子也可以使用 functional updates，如果您查看链接，您会看到一个注释，说明 useState 不会像基于类的对应物 this.setState() 那样合并到状态更新中：

注意

与类组件中的 setState 方法不同，useState 确实 不会自动合并更新对象。你可以复制这个 通过将函数更新器形式与对象传播相结合的行为 语法：

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

您现在可能会注意到，我们的解决方案不是功能更新，但扩展语法的工作原理相同。我们可以进行标准更新的原因是因为您的状态由 3 个独立变量组成，每次更新时您复制所有这些变量，然后简单地替换其中任何一个。

功能更新主要用于下一个状态值取决于当前状态值时，就像react例子喜欢使用的计数器。

我应该指出，功能更新是一种反应约定，而传播语法是 javascript 的expressions & operators 的一部分。

清除输入

您的第一次尝试对于清除状态是正确的，只要您将状态值绑定到每个输入。

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>
);