Как реализовать кнопку Reset Form в компоненте React?

Question

[Shavadrius]

Доброго времени суток!
Подскажите пожалуйста как реализовать функцию очистки формы по нажатию на кнопку (handleRefresh, если пройти по ссылке)?

codesandbox.io

Логика подсказывает, что нужно просто перерисовать всю форму с начальными пропсами, но можно это сделать из самой формы или нужно логику выносить выше, в родительский компонент App?

Comments

[Mesuti]

Поля формы при редактировании заводят value в State
При нажатии Reset, значения полей Value должны быть удалены.

Answer 1

[Paul14]

Для реализации функции очистки формы по нажатию кнопки, вам необходимо выполнить следующие шаги:

1. Внутри компонента Form добавьте состояние, которое будет хранить исходные значения формы. Для этого вы можете использовать useState хук и инициализировать его пустым объектом.

const [initialFormData, setInitialFormData] = useState<{ [id: string | number]: any }>({});

2. Внутри компонента Form создайте функцию для обработки события нажатия кнопки Reset (handleRefresh), в которой будет выполняться следующее:
- Установите исходные значения формы в состоянии formData, используя setFormData(initialFormData).
- Очистите значения во всех дочерних компонентах Input путем вызова метода unregister на каждом из них.

const handleRefresh = () => {
  setFormData(initialFormData);
  props.elements.forEach((item) => {
    item.unregister({ id: item.name, value: "" });
  });
};

3. Добавьте кнопку Reset в компонент Form с обработчиком handleRefresh.

<Button onClick={handleRefresh}>Reset</Button>

Теперь, при нажатии на кнопку Reset, значения формы должны быть сброшены до исходных значений, а все дочерние компоненты типа Input должны быть очищены.