Как очистить входные значения и сбросить состояние в хуках ReactJS - PullRequest
Новая
       60

Как очистить входные значения и сбросить состояние в хуках ReactJS

0 голосов
/ 24 апреля 2020

Предположим, у меня есть три входа и кнопка, я хочу очистить входные значения при нажатии кнопки. 

 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() метод.

1 Ответ

1 голос
/ 24 апреля 2020

Проблема связана с мутацией объекта состояния. Вы изменяете 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 независимых переменных, и при каждом обновлении вы копируете их все, а затем просто заменяете любую из них.

Функциональные обновления в основном используются, когда следующее значение состояния зависит от текущего значения состояния, подобно тому, как примеры счетчиков реагируют на любовь.

Я должен отметить, что функциональные обновления - это соглашение о реакции, в то время как распространение синтаксис является частью 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

...