Автор оригинала: FreeCodeCamp Community Member.
Зафар Алема
В моих предыдущих статьях мы уже написали одно и то же приложение TODO, используя Ванильный JavaScript и Угловой Отказ Теперь пришло время взять этот же пример немного дальше и использовать еще более популярные рамки: реагировать. Этот пример предполагает, что вы уже установили Узел и Create-React-App в вашей системе.
Прежде всего, давайте создадим новое приложение RACT с помощью этой команды.
create-react-app todo
Дайте ему несколько секунд, а затем у вас должна быть папка TODO в вашей файловой системе. CD в эту папку.
Первое, что создано, это новый файл под названием Todo.js внутри SRC/ папка. Вот код в этом файле:
import React, { Component } from 'react';class Todo extends Component { render() { return(This message is from Todo component
) } }export default Todo;
Во-первых, мы импортируем Реагировать и Компонент от реагирования основной.
Тогда мы создаем Компонент Todo который простирается от Компонент Отказ
Компонент Todo имеет оказывать Метод, который отображает JSX с H1 Элемент и текст «Это сообщение из компонента TODO».
Наконец, мы экспортируем этот компонент, чтобы использовать его в остальной части нашего проекта.
Теперь открыть SRC/App.js файл. Нам нужно импортировать наш недавно созданный компонент TODO после импорта App.csss файл.
После того, как сейчас используйте этот компонент внутри метода рендеринга компонента приложения.
import React, { Component } from 'react';import logo from './logo.svg';import './App.css';// import Todo component hereimport Todo from './Todo';
class App extends Component {constructor(props) { super(props);this.state = { show: false }; }render() { // use Todo component inside render method. return ( export default App;
Теперь, когда у нас есть базовый файл компонента TODO и импортировал его в компонент приложения и использовал его, пришло время добавить некоторые Mockdata Отказ На этот раз мы собираемся использовать Государства реагирования работать с нашими данными. Это облегчает все возможное, чтобы выполнить операции CRUD и обновлять вид соответственно. Добавьте этот код в компонент Todo:
class Todo extends Component { state = { edit: false, id: null, mockData: [{ id: '1', title: 'Buy Milk', done: false, date: new Date() }, { id: '2', title: 'Meeting with Ali', done: false, date: new Date() }, { id: '3', title: 'Tea break', done: false, date: new Date() }, { id: '4', title: 'Go for a run.', done: false, date: new Date() }] }}Вышеуказанное состояние также может быть помещено внутри конструктора. Выберите тот, который вам нравится.
Как вы можете видеть, Государство В реакции просто объект JavaScript со свойствами, такими как редактировать , ID, и Mockdata Отказ редактировать Собственность – булева. Он будет использоваться для отображения и скрытия формы редактирования для редактирования конкретного элемента в Mockdata Отказ ID Свойство используется для установки идентификатора текущего элемента внутри Mockdata для выполнения операции обновления.
Теперь, когда у нас есть Mockdata, добавленные в состояние, которое также называется Первоначальное состояние , пришло время добавить JSX. Если вы хотите узнать больше о JSX, то отправляйтесь на здесь Больше подробностей. Это синтаксическое расширение для JavaScript, которое производит реагирующие элементы для рендеринга данных на страницах.
JSX перечисляет все элементы в Mockdata, то есть выполняет работу «R» CRUD. Для этого сделать этот код в класс.
render() { return ( {this.state.mockData.map(item => ( - {item.title}
))}
);}Оказывать Метод прост. Во-первых, он имеет форму, которая используется для добавления нового элемента в список Todo. Эта форма имеет OnsUbmit событие и это называет OnsUbmithandle Метод, который мы напишем позже в этом компоненте.
Тогда у нас есть UL И просто отобразите все элементы внутри Mockdata и представляют заголовок и добавьте те же кнопки, что и в наших предыдущих примерах (удаление, редактирование и полное). Теперь, если вы запускаете свое приложение, используя команду «NPM Start», вы должны увидеть что-то вроде этого.
Теперь, когда R Операция завершена, настало время добавить создать Операция, которая является C в Crud. Добавьте OnsUbmithandle Способ для компонента Todo, как ниже.
onSubmitHandle(event) { event.preventDefault(); this.setState({ mockData: [...this.state.mockData, { id: Date.now(), title: event.target.item.value, done: false, date: new Date() }] });event.target.item.value = '';}
OnsUbmithandle Метод называется, когда нажмите кнопку «Добавить». Здесь мы используем метод setState в состоянии ToDo, который является:
Здесь метод setState вызывается для сброса состояния компонента Todo, который имеет Mockdata. Это просто добавляет новый элемент, взятый из поля ввода. Наконец, установите значение входного поля для пустого.
Перейдите вперед и обновите приложение в вашем браузере и введите «Хику» или что-нибудь, что вы хотите, и нажмите кнопку «Добавить». Вы должны иметь возможность увидеть новый элемент в нижней части списка, как указано выше.
Теперь, когда C сделается, пришло время для D, которое является удалением. Просто добавить ondeletehandle Способ для компонента Todo, как ниже.
onDeleteHandle() { let id = arguments[0]; this.setState({ mockData: this.state.mockData.filter(item => { if (item.id !== id) { return item; } }) });}Этот метод срабатывает, когда нажата кнопка Удаления. Как видите, мы обязательно это и item.id к ondeletehandle Отказ это Ключевое слово необходимо, чтобы у нас есть доступ к текущему объему для доступа к состоянию компонента Todo с это Ключевое слово, в то время как идентификационная часть используется для удаления этого конкретного элемента.
Для доступа к элементу. Мы собираемся использовать аргументы [0] объект. Как только у нас есть идентификатор, то установите состояние и фильтруйте через MOCKDATA. Найдите элемент, который необходимо удалить и вернуть все элементы, кроме той, которые необходимо удалить.
Продолжайте и освежите свой браузер и нажмите Удалить на первом элементе, и вы должны увидеть, что он удален, как на экране ниже.
Это все для удаления детали. Часть обновления, как обычно, состоит из 2 частей. Во-первых, показать форму редактирования, когда нажата кнопка «Редактирование», затем выполните операцию обновления.
Чтобы показать и скрыть форму редактирования, мы собираемся использовать свойство редактирования, которые мы добавили в состояние. Так что добавьте ниже рендеритформ метод компонента.
renderEditForm() { if (this.state.edit) { return } }Он проверяет состояние редактирования и основываясь на том, что он возвращает EditForm, который является синтаксисом JSX формы.
Теперь вызовите вышеуказанный метод в методе Render внутри возврата ключевое слово чуть выше текущей формы, как ниже:
{this.renderEditForm()}Теперь, когда эта часть отсутствует нашего пути, пришло время манипулировать свойством редактирования. Добавьте ниже OneDithandle Метод тодо компонента:
onEditHandle(event) { this.setState({ edit: true, id: arguments[0], title: arguments[1] });}Этот метод срабатывает, когда нажата кнопка редактирования. Мы обязательно три параметра: это , ID и Название Отказ это Ключевое слово используется для ссылки текущего компонента. Он устанавливает ID Свойство для идентификатора текущего элемента редактируется. Это устанавливает редактировать к правда и добавляет свойство заголовка в состояние, которое мы доступны позже в этом компоненте.
Теперь, когда у нас есть этот код в нашем компоненте, перейдите в браузер, обновитесь и щелкните на кнопке редактирования для первого элемента, который покажет форму редактирования, как ниже:
Эта форма имеет поле ввода и кнопку обновления. Теперь пришло время справиться с U-разной частью CRUD. Когда Обновить Кнопка, в форме редактирования, показанной выше, нажата, метод ниже будет срабатывается:
onUpdateHandle(event) { event.preventDefault(); this.setState({ mockData: this.state.mockData.map(item => { if (item.id === this.state.id) { item['title'] = event.target.updatedItem.value; return item; }return item; }) });
this.setState({ edit: false });}Добавьте вышеуказанный метод вашему компоненту Todo. Это устанавливает состояние компонента, отображается через Mockdata внутри состояния и находит элемент, который необходимо обновлять и установить его заголовок с новым заголовком. Наконец, установите свойство редактирования состояния в false, чтобы скрыть форму. Вот и все.
Теперь запустите свой код в браузере и попробуйте обновить первый элемент. Вы должны быть в состоянии увидеть обновленный заголовок.
Конечный метод используется для установки элемента в завершенное состояние. Добавьте ниже метод, который имеет значение именно.
onCompleteHandle() { let id = arguments[0]; this.setState({ mockData: this.state.mockData.map(item => { if (item.id === id) { item['done'] = true; return item; }return item; }) });}
Вышеуказанный метод устанавливает свой свойство элемента в Mockdata в True. Это в значительной степени так же, как и в наших предыдущих двух примерах в ванильном JavaScript и угловых.
Теперь сделать эту работу, добавьте код ниже на «Li», чтобы установить свой класс на основе состояния свойства «Готово» в Mockdata.
className={ item.done ? 'done' : 'hidden' }Теперь обновите свой браузер и нажмите кнопку «Полная кнопка». Вы должны быть в состоянии увидеть ниже изменения.
Ниже приведены основные CSS, которые необходимо добавить в index.csss Файл на заказ для отображения сделанных элементов на экране.
.done { text-decoration: line-through;}Вот и все. Как видите, RegiveS является еще более ориентированным компонентным решением для современных приложений JavaScript. Следующая задача для вас будет разделить элемент формы в свои собственные компоненты, чтобы нам не нужно использовать две элементы формы для обновления и добавления операций. Это должно быть простой и веселой задачей для всех.
Чтобы получить полный код, пожалуйста, клонировать ниже репозиторий.
ZAFAR-Salem/React-Todo Вклад в разработку ZAFAR-SaleM/React-Todo, создав счет на GitHub. github.com.