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

Пример реализации кнопки "Reset Form" в компоненте React может выглядеть следующим образом:

1. Реализация функции очистки формы в компоненте-форме:

```jsx
import React, { useState } from 'react';

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleReset = () => {
    setFormData({
      name: '',
      email: '',
      password: '',
    });
  };

  return (
    <form>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <button type="button" onClick={handleReset}>
        Reset Form
      </button>
    </form>
  );
};

export default MyForm;
```

В данном примере функция `handleReset` вызывается по нажатию на кнопку "Reset Form" и сбрасывает значения полей формы на пустые строки.

2. Реализация функции очистки формы в родительском компоненте App:

```jsx
import React, { useState } from 'react';
import MyForm from './MyForm';

const App = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleReset = () => {
    setFormData({
      name: '',
      email: '',
      password: '',
    });
  };

  return (
    <div>
      <MyForm
        formData={formData}
        handleChange={handleChange}
        handleReset={handleReset}
      />
      <button type="button" onClick={handleReset}>
        Reset Form
      </button>
    </div>
  );
};

export default App;
```

В данном примере функция `handleReset` вызывается как в компоненте-форме `MyForm`, так и в родительском компоненте `App`. Форма передается в компонент-форму `MyForm` с помощью пропсов, чтобы форма могла использовать значения `formData` и функцию `handleChange` из родительского компонента. Кнопка "Reset Form" также рассположена в родительском компоненте `App` и вызывает функцию `handleReset`.

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

1. Внутри компонента Form добавьте состояние, которое будет хранить исходные значения формы. Вы можете использовать useState хук и инициализировать его пустым объектом.
```javascript
const [initialFormData, setInitialFormData] = useState({});
```

2. Внутри компонента Form создайте функцию handleRefresh для обработки события нажатия кнопки Reset. В этой функции выполните следующие действия:
- Установите исходные значения формы в состоянии formData, используя setFormData(initialFormData).
- Очистите значения во всех дочерних компонентах Input путем вызова unregister на каждом из них.
```javascript
const handleRefresh = () => {
  setFormData(initialFormData);
  props.elements.forEach((item) => {
    item.unregister({ id: item.name, value: "" });
  });
};
```

3. Добавьте кнопку Reset в компонент Form со свойством onClick, которое будет вызывать функцию handleRefresh.
```javascript
Reset
```

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