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

问题描述 投票:0回答:1

假设我有三个输入和一个按钮,我想在按钮被点击时清空输入值。

 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() 方法。

javascript reactjs react-hooks rendering state
1个回答
1
投票

问题是状态对象的突变。你正在突变 input_value 并将其保存回状态,而不是返回一个新的对象引用。

更新状态

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

这样就会在现有的状态中进行传播,并设置更新输入的键值对。

如果对铺展语法不熟悉,通常的惯例是将状态对象浅浅地复制到一个新对象中。useState 钩子也可以使用 功能更新如果你检查链接,你会看到一个关于如何的说明。useState 并不像它的类式对应的那样,在状态更新中合并。this.setState():

说明:

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

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

你现在可能会注意到,我们的解决方案并不是一个函数更新,但传播语法的工作原理是一样的。我们之所以可以进行标准更新,是因为你的状态由3个独立的变量组成,每次更新时,你都会复制所有的变量,然后简单地替换其中的任何一个变量。

函数式更新主要在以下情况下使用 下一个 状态值 取决于 当前的状态值,就像 react 爱用的计数器例子一样。

我要指出的是,函数式更新是反应式的惯例,而spread语法是javascript的一部分。表达式& 操作符.

清理输入

你的第一次尝试对于清除状态是正确的,只要你把状态值绑定到每个输入端。

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

Edit romantic-hawking-rqvko

© www.soinside.com 2019 - 2024. All rights reserved.