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

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

Answer 1

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

正在更新状态

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

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

如果不熟悉传播语法，将状态对象浅层复制到新对象中是一种常见的约定。 useState 钩子也可以使用 functional updates，如果您检查 link，您会看到一条注释，说明 useState 如何不像 [=54] 那样在状态更新中合并=]-based 对应，this.setState():

Note

Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:
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>
);

如何清空 ReactJS 钩子中的输入值和重置状态

How to empty input values and reset state in ReactJS hooks

javascript

state

rendering

reactjs

react-hooks