Как построить список Todo с реактивными крючками

Автор оригинала: Yazeed Bzadough.

Rect V16.7.0-alpha представил Крючки И я взволнован.

Что такое крючки?

Они функции, которые дают вам функции реагирования, такие как состояние и жизненные циклы без классов ES6.

Некоторые преимущества

Изоляция логики штата, облегчая тестирование.
Обмен состоятельной логикой без рендеринга или компонентов высшего порядка.
Отделение опасений вашего приложения на основе логики, не жизненных циклов.
Избегая классов ES6, потому что они причудливые, не на самом деле классы, И путешествие даже опытных разработчиков JavaScript.

Для получения более подробной информации см. Официальные крючки React Intro Отказ

Принять крючки постепенно

На момент написания, крючки были в альфа, и их API может измениться в любое время.

React 16.8.0 было первым устойчивым выбросом для поддержки крючков, и каждый день больше учебных пособий и примерного кода. Однако, поскольку нет планов удаления классов от React и Cooks будут работать с существующим кодом, команда Ract React рекомендует избежать «больших переписи». Вместо этого они предложают практиковать крючки в неряхрических компонентах, затем используя их на месте классов, которые идут вперед.

Давайте построим список Todo

Списки Todo являются наиболее чрезмерными извлеченными примерами для веской причины – они фантастическая практика. Я рекомендую это для любого языка или библиотеки, которую вы хотите попробовать.

Наши будут делать только несколько вещей

Дисплей TODOS в хорошем дизайне материала
Разрешить добавлять TODOS через вход
Удалить Тодос

Настраивать

Вот Github и CodeSandbox Ссылки.

git clone https://github.com/yazeedb/react-hooks-todo
cd react-hooks-todo
npm install

Мастер Филиал имеет готовый проект, поэтому оформить заказ Начать ветвь, если вы хотите следовать.

Запуск оформления Git

И запустить проект.

Начнем NPM

Приложение должно работать на localhost: 3000 И вот наш начальный интерфейс.

Это уже настроено с Материал-ui дать нашу страницу профессиональный вид. Давайте начнем добавлять некоторые функциональные возможности!

Компонент Тодоформ

Добавьте новый файл, SRC/ToDoform.js Отказ Вот начальный код.

import React from 'react';
import TextField from '@material-ui/core/TextField';

const TodoForm = ({ saveTodo }) => {
  return (
    
      
    
  );
};

export default TodoForm;

Учитывая имя, мы знаем, что его работа – добавить ТОДОС в наше состояние. Говоря о котором, Вот наш первый крючок Отказ

stestate.

Проверьте этот код

import { useState } from 'react';

const [value, setValue] = useState('');

Уместите это просто функция, которая принимает начальное состояние и возвращает массив. Идти вперед и console.log Это.

Первый индекс массива – это текущее значение вашего состояния, а второй индекс – функция обновления.

Итак, мы соответствующим образом назвали их ценность и SetValue Использование ES6 Разрушение задания Отказ

Увенчан с формами

Наша форма должна отслеживать значение ввода и вызов Savetodo подать. Уместите Может помочь нам с этим!

Обновить Todoform.js новый код в смелый Отказ

import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';

const TodoForm = ({ saveTodo }) => {
  const [value, setValue] = useState('');

  return (
     {
        event.preventDefault();
        saveTodo(value);
      }}
    >
       {
          setValue(event.target.value);
        }}
        value={value}
      />
    
  );
};

export default TodoForm;

Вернуться в index.js , Импортируйте и используйте этот компонент.

// ...

import TodoForm from './TodoForm';

// ...

const App = () => {
  return (
    
      
        Todos
      

      
    
  );
};

Теперь ваша стоимость зарегистрирована на отправке (нажмите Enter).

Увенчан с Тодос

Нам также нужно государство для наших Тодос. Импорт Уместите в index.js Отказ Наше первоначальное состояние должно быть пустой массив.

import React, { useState } from 'react';

// ...

const App = () => {
  const [todos, setTodos] = useState([]);

  // ...
};

Тодолист компонент

Создайте новый файл под названием SRC/TODLIST.JS Отказ

Редактировать: спасибо Такахиро Хата за помощь мне двигаться OnClick на правильное место!

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';

const TodoList = ({ todos, deleteTodo }) => (
  
    {todos.map((todo, index) => (
      
        
        
        
           {
              deleteTodo(index);
            }}
          >
            
          
        
      
    ))}
  
);

export default TodoList;

Требуется два реквизита

Тодос : Массив Тодоса. Мы карта над каждым из них и создайте элемент списка.
Делитетодо : Нажав на тоду Iconbutton стреляет эту функцию. Проходит индекс , что уникально идентифицирует тоду в нашем списке.

Импортируйте этот компонент в вашем index.js Отказ

import TodoList from './TodoList';
import './styles.css';

const App = () => {
  //...
};

И использовать его в вашем Приложение функция такая

Добавление ToDos

Еще в index.js Давайте редактировать наши Тодоформ опоры, Savetodo Отказ

 {
    const trimmedText = todoText.trim();

    if (trimmedText.length > 0) {
      setTodos([...todos, trimmedText]);
    }
  }}
/>

Просто объедините существующие TODOS с нашим новым, дополнительным пробелом вырезанным.

Мы можем добавить ToDos сейчас!

Очистка ввода

Обратите внимание на вход не очищают после добавления нового TODO. Это плохой пользовательский опыт!

Мы можем исправить это с небольшим изменением кода в Todoform.js Отказ

 {
    event.preventDefault();

    saveTodo(value);

    setValue('');
  }}
/>

После сохранения TODO настройте состояние формы в пустую строку.

Теперь он выглядит хорошо!

Удаление Тодос

Тодолист Предоставляет каждому ToDo индекс Как это гарантированный способ найти тот, который мы хотим удалить.

Todolist.js.

 {
    deleteTodo(index);
  }}
>

Мы воспользуемся этим в index.js Отказ

 {
    const newTodos = todos.filter((_, index) => index !== todoIndex);

    setTodos(newTodos);
  }}
/>

Независимо от того, что Тодос не совпадает с предоставленным индекс хранятся и хранятся в состоянии, используя Сатодос Отказ

Удалить функциональность завершена!

Абертеринг умиротвора Тодос

Я упомянул, что крючки отлично подходят для разделения состояния и логики компонентов. Вот что это может выглядеть в нашем приложении Todo.

Создайте новый файл под названием SRC/USETODOSTATE.JS Отказ

import { useState } from 'react';

export default (initialValue) => {
  const [todos, setTodos] = useState(initialValue);

  return {
    todos,
    addTodo: (todoText) => {
      setTodos([...todos, todoText]);
    },
    deleteTodo: (todoIndex) => {
      const newTodos = todos.filter((_, index) => index !== todoIndex);

      setTodos(newTodos);
    }
  };
};

Это наш же код от index.js , но отделен! Наше государственное управление уже не тесно связано с компонентом.

Теперь просто импортируйте его.

import React from 'react';
import ReactDOM from 'react-dom';
import Typography from '@material-ui/core/Typography';
import TodoForm from './TodoForm';
import TodoList from './TodoList';
import useTodoState from './useTodoState';
import './styles.css';

const App = () => {
  const { todos, addTodo, deleteTodo } = useTodoState([]);

  return (
    
      
        Todos
      

       {
          const trimmedText = todoText.trim();

          if (trimmedText.length > 0) {
            addTodo(trimmedText);
          }
        }}
      />

      
    
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(, rootElement);

И все еще работает как нормально.

Расстояние формы входной доклад

Мы можем сделать то же самое с нашей формой!

Создать новый файл, SRC/insiquinputstate.js Отказ

import { useState } from 'react';

export default (initialValue) => {
  const [value, setValue] = useState(initialValue);

  return {
    value,
    onChange: (event) => {
      setValue(event.target.value);
    },
    reset: () => setValue('')
  };
};

А теперь Todoform.js должен выглядеть так.

import React from 'react';
import TextField from '@material-ui/core/TextField';
import useInputState from './useInputState';

const TodoForm = ({ saveTodo }) => {
  const { value, reset, onChange } = useInputState('');

  return (
     {
        event.preventDefault();

        saveTodo(value);
        reset();
      }}
    >
      
    
  );
};

export default TodoForm;

И мы все сделали! Надеюсь, тебе понравилось, до следующего раза!