Todo list 활용 Context API
21184 단어 reactusecontext
아이디어는 Context API para facilitar o desenvolvimento da sua aplicação react e evitar em alguns casos a utilização do redux, para gerenciamentos simples de estados globalis.
문맥
O context é o responsável por gerenciar os estados globalis da nossa aplicação, nele ficará o estado a ser compartilhado pelos componentes e os métodos utilizados por eles, nesse caso temos apenas um estado a ser compartilhado, que é o todos e os métodos relacionados a eles são, inserção, atualização e exclusão.
No TodoProvider ficam armazenados o estado e métodos que devem ser compartilhados entre os componentes, ele recebe o paraâmetro children, que são os componentes filhos que vão poder consumir tudo que foi declarado dentro dele.
import React, { useState, createContext } from "react";
export const TodoContext = createContext();
const TodoProvider = ({ children }) => {
const [todos, setTodos] = useState([
{ id: 1, title: "Estudar react", done: true },
{ id: 2, title: "Estudar webpack", done: false },
{ id: 3, title: "Estudar context", done: false },
{ id: 4, title: "Estudar redux", done: false },
]);
const saveTodo = (todo) => {
const newTodo = {
id: todo.length + 1,
title: todo.title,
done: false,
};
setTodos([...todos, newTodo]);
};
const removeTodo = (todoIndex) => {
todos.splice(todoIndex, 1);
setTodos([...todos]);
};
const checkTodo = (todoIndex) => {
const todo = todos[todoIndex];
todo.done = !todo.done;
setTodos([...todos]);
};
return (
<TodoContext.Provider value={{ todos, saveTodo, checkTodo, removeTodo }}>
{children}
</TodoContext.Provider>
);
};
export default TodoProvider;
수식 구성 요소
O 구성요소는 수식과 응답을 기준으로 새로운 작업을 시작하고 컨텍스트를 저장하는 방법을 선택합니다.
import React, { useContext, useState } from "react";
import { TodoContext } from "../context/TodoContext";
const TodoForm = () => {
const { saveTodo } = useContext(TodoContext);
const [todo, setTodo] = useState();
const handleSubmit = (event) => {
event.preventDefault();
saveTodo(todo);
event.target.reset();
};
const handleInputChange = (event) => {
setTodo({
...todo,
title: event.target.value,
});
};
return (
<form onSubmit={handleSubmit} className="form-inline">
<div>
<input
type="text"
name="title"
className="form-control"
placeholder="Nova tarefa"
onChange={handleInputChange}
/>
<button type="submit" className="btn btn-default" />
</div>
</form>
);
};
export default TodoForm;
목록 구성요소
O componente da lista será responsável por exibir os dados que estão salvos no estado e também por atualizar e excluir algum item da lista, para exibição ele utiliza o map que é um recurso do próprio javascript, já para alusão e atualização ele utiliza os métodos removeTodo 및 checkTodo는 컨텍스트를 가져올 때 가져옵니다.
import React, { useContext } from "react";
import { TodoContext } from "../context/TodoContext";
function TodoList() {
const { todos, removeTodo, checkTodo } = useContext(TodoContext);
const handleDelete = (todoIndex) => {
removeTodo(todoIndex);
};
const handleDone = (todoIndex) => {
checkTodo(todoIndex);
};
return (
<ul>
{todos.map((todo, index) => (
<li className="list-group-item" key={index}>
<div className={todo.done ? "done" : "undone"}>
<span className="icon" onClick={() => handleDone(index)}></span>
<span>{todo.title}</span>
<button
type="button"
className="close"
onClick={() => handleDelete(index)}
>
×
</button>
</div>
</li>
))}
</ul>
);
}
export default TodoList;
컨텍스트 컴 os 구성 요소 통합
Por fim, é necessário fazer a integração dos componentes com o context, esse passo é o mais simples, importamos o nosso provider e colocamos os componentes que compartilham o mesmo estado dentro dele, depois disso todos esses componentes têm acesso ao estado e aos métodos que 포럼은 컨텍스트가 없다고 선언합니다.
import React from "react";
import TodoProvider from "./context/TodoContext";
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";
import "./style.css";
const App = () => {
return (
<TodoProvider>
<div className="todoForm">
<h3 className="title">Lista de tarefas</h3>
<TodoForm />
<TodoList />
</div>
</TodoProvider>
);
};
export default App;
Obs: Em aplicações mais complexas onde se tem a necessidade de gerenciar muitos estados de diferentes maneiras, é mais recomendado se utilizar or redux ao invés de context api.
레포지토리
Todo List 👩🏿💻
Reference
이 문제에 관하여(Todo list 활용 Context API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/marinasantana/todo-list-utilizando-context-api-13nk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)