React JS: Удаление, редактирование и очистка формы

Очистка формы после добавления пользователя

После добавления нового пользователя форма не очищается. Для решения этой проблемы, в component/User.js, используем ref для доступа к HTML-элементу формы.

Создадим ref с помощью ключевого слова ref, передав в него анонимную функцию, принимающую элемент (ссылку на HTML-форму):

<form ref={(el) => (this.myForm = el)}>
  {/* ... */}
</form>

Внутри анонимной функции создаётся свойство myForm, содержащее ссылку на элемент формы. В обработчике события кнопки «Добавить», после вызова метода onAddUser, добавим очистку формы:

onAddUser();
this.myForm.reset();

Теперь форма очищается после добавления пользователя.

Удаление и редактирование записей

Реализуем удаление и редактирование записей. Создадим метод onDeleteUser в основном компоненте (App.js), принимающий id пользователя для удаления:

onDeleteUser(userId) {
  this.setState({
    users: this.state.users.filter((user) => user.id !== userId)
  });
}

Метод использует filter для создания нового массива без пользователя с заданным id. Этот массив устанавливается в качестве нового состояния users. Этот метод передаётся в компонент Users, а затем в User, где вызывается по клику на кнопке удаления:

<button onClick={() => this.props.onDeleteUser(this.props.user.id)}>
  {/* Иконка удаления */}
</button>

Для редактирования, добавим состояние editform в компонент User:

constructor(props) {
    super(props);
    this.state = {
        editform: false
    };
}

Кнопка редактирования меняет состояние editform на противоположное:

<button onClick={() => this.setState({ editform: !this.state.editform })}>
  {/* Иконка редактирования */}
</button>

Форма редактирования отображается, если editform равно true:

{this.state.editform && <AddUser />}

Добавим стили (пример):

.user form {
  margin-top: 20px;
}

.user form input,
.user form button {
  /* ... стили ... */
}

Метод editUser в App.js принимает отредактированный объект пользователя:

editUser(user) {
  this.setState({
    users: this.state.users.map((u) => (u.id === user.id ? user : u))
  });
}

Этот метод ищет пользователя по id и заменяет его отредактированной версией. id пользователя передаётся в форму редактирования. При отправке формы создаётся объект, включающий id, и передаётся в editUser.

В этом уроке мы добавили функционал удаления и редактирования записей, используя ref, filter, map и setState. Мы также улучшили дизайн формы с помощью CSS. Теперь приложение позволяет добавлять, удалять и редактировать пользователей, динамически обновляя интерфейс.