Блог

У меня есть очень простой компонент реакции, как вы можете видеть ниже. Поэтому, насколько я знаю, каждый раз при изменении значения состояния эти компоненты перерисовываются. Но вот что я хочу знать: если компонент перерисовывается каждый раз, когда я что-то вводю в поле ввода, почему входное значение остается неизменным и не возвращается к пустому значению?

 import React, { useState } from "react";

const InputExample = () => {
  const [value, setValue] = useState("");
  console.log("render");
  return (
    <>
      <input type="text" onChange={(e) => setValue(e.target.value)} />
    </>
  );
};

export default InputExample;
 

Вы путаете повторный рендеринг с повторной инициализацией. Повторный рендеринг просто обновляет DOM,чтобы отразить изменения в состоянии. Это не означает, что компоненту воссоздается и присваивается начальное состояние, с которого он начинался.

В этом случае всякий раз, когда ввод изменяется, переменная значения обновляется с учетом того, что было введено в элементе ввода.

Поскольку значение не задано, оно считается «неконтролируемым» и выполняет поведение html по умолчанию. Чтобы сохранить его как пустое значение, вам придется сделать что-то вроде:

 import React, { useState } from "react";

const InputExample = () => {
  const [value, setValue] = useState("");
  console.log("render");
  return (
    <>
      <input type="text" onChange={(e) => setValue(e.target.value)} value="" />
    </>
  );
};

export default InputExample;