Toy project (TS) : Todo List 3
input
を使用して、TodoListの新しいアイテムを動的に作成する必要があります.新しいAddTodo
要素を追加しましょう.AddTodo.tsx
import React, { ChangeEvent, FormEvent, useState } from 'react';
import { AddTodoType } from '../types';
interface AddTodoProps {
addTodo : AddTodoType;
}
export const AddTodo: React.FC<AddTodoProps> = ({addTodo}) =>{
const [newTodo,setNewTodo] = useState("");
const handleChage = (e:ChangeEvent<HTMLInputElement>) =>{
setNewTodo(e.target.value);
}
const handleSubmit = (e: FormEvent<HTMLButtonElement>) => {
e.preventDefault();
addTodo(newTodo);
setNewTodo("");
}
return(
<form>
<input placeholder="input to do" type ="text" value={newTodo} onChange={handleChage}/>
<button type= "submit" onClick = {handleSubmit}>Add Todo</button>
</form>)
}
<input value={newTodo} onChange={handleChage}/>
で新しいプロジェクトテキストを保存します.<button type= "submit" onClick = {handleSubmit}>
ボタンなので、まずe.preventDefault();
でフォームラベルに積まれているので、他の場所に送信する必要がないので、自動コミット機能を停止します.新しいnewTodoを追加してリフレッシュします.
App.tsx
import React, { useState } from 'react';
import { AddTodo } from './components/AddTodo';
import { TodoItemCard } from './components/TodoItemCard'
import { TodoList } from './components/Todolist';
import {Todo , HandleTodo, AddTodoType} from './types'
const dummyTodos : Array<Todo> = [{text : "pop a pill ", complete : true}, {text : "eat dinner ", complete : false}]
const App : React.FC = () => {
const [todos , setTodos] = useState(dummyTodos);
const handleTodo : HandleTodo = selectedTodo =>{
const newTodos = todos.map((todo) =>{
if (todo === selectedTodo)
{
return { ...todo, complete: !todo.complete }
}
return todo;
});
setTodos(newTodos)
}
//그에 걸맞게 제일 상위 컴포넌트에서 함수 추가.
const addTodo: AddTodoType = (newTodo ) => {
// 항목이 비어있으면 동작하지 않게,
newTodo.trim() !== "" &&
// todos type에 맞게 추가.
setTodos([...todos,{text :newTodo, complete: false}])
}
return (
<>
<TodoList todos={todos} handleTodo = {handleTodo}/>
<AddTodo addTodo ={addTodo}/>
</>
);
}
export default App;
完了!(cssはできない、ほほほ;)
Reference
この問題について(Toy project (TS) : Todo List 3), 我々は、より多くの情報をここで見つけました https://velog.io/@j_user0719/Toy-project-TS-Todo-List-3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol