В этом уроке мы научимся использовать функции в качестве свойств компонентов для реализации функционала редактирования и удаления объектов.
Проблема и решение
В приложении есть компоненты Task и Block. Block содержит функции Edit, Save, Delete Block и update Text. Эти функции находятся в разных компонентах и не взаимодействуют. Решение: передача функций из Block в Task в качестве свойств.
Передача функций как свойств
Для передачи функций update Text и Delete Block в Task используем следующий подход:
// Компонент Block
<Task update={this.updateText} deleteBlock={this.deleteBlock} />update и deleteBlock — имена атрибутов, которым передаются функции this.updateText и this.deleteBlock. deleteBlock используется вместо зарезервированного слова delete.
В Task эти функции доступны через this.props.update и this.props.deleteBlock.
Реализация удаления и редактирования в Task
В Task создадим функции Remove и Save.
Remove использует переданную функцию Delete Block для удаления объекта:
Remove(index) {
this.props.deleteBlock(index);
}Save использует переданную функцию update для обновления текста объекта:
Save() {
this.props.update(this.state.newTxtValue, this.props.index);
}Обе функции используют this.props для доступа к переданным функциям и индексу объекта.
Тестирование
После реализации Remove и Save тестируем функционал редактирования и удаления. Добавление, сохранение и удаление объектов должны работать корректно. Удаление объекта не должно нарушать связь между остальными.
Использование функций как свойств компонентов — мощный инструмент в React, обеспечивающий взаимодействие между компонентами и создающий чистые, хорошо структурированные приложения. Это упрощает управление состоянием и повышает масштабируемость. Пример демонстрирует эффективность этого подхода для реализации редактирования и удаления объектов.