Блог

Работая над приложением React и столкнувшись с небольшой проблемой, из-за которой я не могу очистить свое входное значение, после того, как введенное значение было возвращено / предварительно заполнено из серверной части, попытался погуглить эту проблему, нашел несколько похожих тем здесь, но я не смог решить эту проблему.

Требования: name атрибут должен быть обязательным, также введенное значение должно быть напечатано вне ввода, поэтому я использовал value с. defaultValue

Решения с недостатками

1. Удалите атрибут «name», но я потеряю предварительно заполненное значение
2. Удалите value , defaultValue , и onChange обработчик, но когда я потеряю значение для распечатки.

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

 const [value, setValue] = useState('');

const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setPartnerSlug(event.target.value);
  // Also tried:
  // setValue({
  //   ...value,
  //   [event.target.name]: event.target.value,
  // });
};

<input
  name="name"
  label="label"
  placeholder="placeholder"
  value={value}
  defaultValue={value}
  onChange={onChange}
/>
Print Value: {value} // Required: Display typed input value