Форма для создания и удаления пользователя

Условие

Создайте форму, содержащую поля ввода: имя, возраст, электронная почта, роль (выпадающий список) и пароль. Добавьте кнопку, позволяющую удалить запись.

<input placeholder="Имя" />
<input placeholder="Возраст" />
<input placeholder="Email" />
<select>
  <option>Пользователь</option>
  <option>Админ</option>
</select>
<input placeholder="Пароль" />
<button>✕</button>

Ответ

Используйте подписанные поля с подходящими type, обработчик отправки и отдельную кнопку удаления type='button'. Создание и удаление должны вызывать переданные операции сохранения.

Пример компонента с контрактом onSave(data) и onDelete():

function UserForm({ onSave, onDelete, busy = false }) {
  return <form onSubmit={event => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    onSave({ name: data.get('name').trim(), age: Number(data.get('age')),
      email: data.get('email').trim(), role: data.get('role'),
      password: data.get('password') });
  }}>
    <fieldset disabled={busy}>
      <label>Имя <input name="name" required /></label>
      <label>Возраст <input name="age" type="number" min="0" step="1" required /></label>
      <label>Email <input name="email" type="email" required /></label>
      <label>Роль <select name="role">
        <option value="user">Пользователь</option><option value="admin">Админ</option>
      </select></label>
      <label>Пароль <input name="password" type="password" autoComplete="new-password" required /></label>
      <button type="submit">Создать</button>
      <button type="button" onClick={onDelete} disabled={!onDelete}>Удалить</button>
    </fieldset>
  </form>;
}

Родитель обрабатывает ошибки и busy. Backend обязан повторить валидацию, проверить право назначать роль и удалять запись. Пароль нельзя хранить открытым текстом или возвращать в списке пользователей; для удаления существующей записи передаётся её проверенный ID.