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はできない、ほほほ;)