Реактивные крючки для начинающих (Usestate)

Автор оригинала: Emmancipate Musemwa.

Реагирование 16.8 было выпущено крюками, которые являются дополнительной функцией, которая позволяет нам использовать состояние и другие функции реагирования без записи класса.

Если вы работали с реагированным ранее, вы должны знать, что если вы хотите использовать состояние в своем компоненте, вы должны использовать классы. Ну, это больше не обязательно в этом случае. Теперь вы можете иметь состояние в ваших функциональных компонентах, используя что-то называемое Уместите Отказ

Наш конечный продукт будет выглядеть как изображение ниже.

Вы можете следить за руководством, наблюдая за видео ниже или просто продолжайте читать этот пост.

Видео здесь

Давайте начнем – мы собираемся создать новое приложение React Application, используя Создать ract app cli Отказ Давайте отправимся на Создать rac rac app github и скопируйте команды, которые нам нужно оттуда.

Давайте откроем окно терминала и создайте новое приложение под названием My-toDo-list. Откройте генерируемый проект реагирования в редакторе кода по вашему выбору. Я собираюсь использовать Visual Studio Code. Давайте откроем наш терминал и запустите Запуск пряжи

Отлично, наше приложение работает. Давайте начнем кодировать. Давайте напишем весь наш код в App.js. Начните с удаления всего кода в файл и добавьте две строки ниже.

import React, { useState } from 'react';
import './App.css';

Во-первых, мы импортируем реактивный и утилизирующий крючок. Учебатный крючок позволит указать в наших функциях. В предыдущих версиях React, если вы хотите использовать состояние в своем компонеллере React, вы должны были использовать классы с конструктором. Следовательно, компоненты, которые мы собираемся написать здесь, собираются быть чисто функциональными. Вторая строка импортирует наши CSS по умолчанию, которые я уже написал ниже.

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
body{
  background-color: #5856d6;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
}
.app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 15px;
  width: 500px;
  margin: auto;
}
form{
  width: 100%;
}
form div{
  width: 100%;
  display: flex;
  flex-direction: row;
}
button{
  font-weight: bold;
  font-size: 12px;
  border: none;
}
form button {
  background-color:#656565;
  color: #fff;

}
input{
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
}
.list-item{
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.status-btn{
  height: 40px;
  background-color: #4cd964;
  color: #fff;
}
.done{
  background-color: #ff3b30;
}
.strike-through{
  color: #ff3b30;
  text-decoration: line-through;
}

Теперь давайте код нашего основного компонента внутри App.js Отказ

function App (){
  const [todos, setTodos] = useState([{
    text:"buy groceries",
    isDone: false
  },{
    text:"Go to the gym",
    isDone: false
  },{
    text:"Pay credit card bill",
    isDone: false
  }]);
  return (
    
    Todo list
    
  );
}

На второй строке мы разрушительны Тодос и Сатодос от Уместите Отказ Первое значение « TODOS » будет нашими данными. Это почти похоже на this.state.todos Отказ Второе значение ” settodos” это метод, который будет использовать для манипулирования «Тодос» Отказ Это почти похоже на this.setState Отказ Обратите внимание, что вы можете назвать эти два, что вы хотите, как вы увидите позже. Массив объектов внутри Уместите будет начальное значение тодос.

Теперь давайте расширим наш код и представьте список Todo

function App (){
  const [todos, setTodos] = useState([{
    text:"buy groceries",
    isDone: false
  },{
    text:"Go to the gym",
    isDone: false
  },{
    text:"Pay credit card bill",
    isDone: false
  }]);

  const addTodo = (text)=>{
    setTodos([...todos, {text}]);
  }

  const toggleTodoStatus = (payload)=>{
    const { status, index } = payload;
    const myNewTodos = [...todos];
    myNewTodos[index].isDone = status;
    setTodos(myNewTodos);

  }
  return (
    
    Todo list

    {
      todos.map((todo, index)=>{
        const { text, isDone } = todo;
        const btnText = isDone ? "Undo" : "Done";

        return(
          
            
              {text}
            
            
          
        )
      })
    }
    
  );
}

Использование todos.map В коде выше мы петлю через массив Todos. Использование Const {Text, Isdone; Мы определяем структуру текста, а логическое значение сделано из объекта TODO. Isdone будет использоваться для выделения того, был ли TODO завершен или нет. На следующей строке мы создаем переменную под названием btntext Что значение зависит от состояния доработки товаров TODO. Значение используется на линии 44 {btntext} как значение кнопки. Чтобы пометить наши Тодос как завершено, мы проходим через текст с линией, как показано ниже.

Функция TOGGLETODOSTATUS ({Status:! Isdone, index}) принимает объект с двумя клавишами, статусом и индексом. Значение состояния будет противоположное любого текущего состояния Isdone Булевы, следовательно, использование “!” Логично не оператор в JavaScript. индекс Положение объекта Todo в массиве, которое мы будем использовать для обновления состояния. Давайте посмотрим на объявление функции ниже.

const toggleTodoStatus = (payload)=>{
    const { status, index } = payload;
    const myNewTodos = [...todos];
    myNewTodos[index].isDone = status;
    setTodos(myNewTodos);

  }

Функция использует Сатодос Чтобы обновить значение элемента TODOS, как this.setState.

Чтобы добавить в список TODOS, мы создаем компонент формы под названием Аддодоформ Отказ

function AddTodoForm ({addTodo}){
  const [text, setText] = useState("");

  const submitTodo = (ev)=>{
    ev.preventDefault();

    if(text){
      addTodo(text);
      setText("");
    }else{
      alert("A value is required!");
    }

  }

  return(
    
      Add a todo
      
        {
            setText(ev.target.value);
          }}
          value={text}
        />
        
      
    
  )

}

Как вы можете увидеть на второй строке, мы снова разрушаем от rumentate, как это const [текст, (""); Называть значения все, что мы хотим. Переменная текст будет держать текст в положении, пока Setext используется для обновления его в качестве типов пользователей.

Наконец-то давайте создадим функцию внутри нашего компонента приложения выше метода возврата. Функция обновит массив Todos, когда пользователь нажимает кнопку «Отправить» в нашем Компонент AddodoForm. Мы пройдем эту функцию нашему Аддодоформ как опоры.

const addTodo = (text)=>{
    setTodos([...todos, {text}]);
  }
  return (
    
    Todo list

    
...

Наш последний код будет выглядеть ниже

import React, { useState } from 'react';
import './App.css';

function AddTodoForm ({addTodo}){
  const [text, setText] = useState("");

  const submitTodo = (ev)=>{
    ev.preventDefault();

    if(text){
      addTodo(text);
      setText("");
    }else{
      alert("A value is required!");
    }

  }

  return(
    
      Add a todo
      
        {
            setText(ev.target.value);
          }}
          value={text}
        />
        
      
    
  )

}

function App (){
  const [todos, setTodos] = useState([{
    text:"buy groceries",
    isDone: false
  },{
    text:"Go to the gym",
    isDone: false
  },{
    text:"Pay credit card bill",
    isDone: false
  }]);

  const toggleTodoStatus = (payload)=>{
    const { status, index } = payload;
    const myNewTodos = [...todos];
    myNewTodos[index].isDone = status;
    setTodos(myNewTodos);

  }
  
  const addTodo = (text)=>{
    setTodos([...todos, {text}]);
  }
  return (
    
    Todo list

    

    {
      todos.map((todo, index)=>{
        const { text, isDone } = todo;
        const btnText = isDone ? "Undo" : "Done";

        return(
          
            
              {text}
            
            
          
        )
      })
    }
    
  );
}
export default App;

Код: https://github.com/eman1000/react-hooks-todoList.

Todo list

Todo list

Todo list

Todo list

Читайте ещё по теме: