質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

278閲覧

react 親コンポーネントでstateを管理したい

xxuxuxuxu

総合スコア18

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/01/16 00:52

前提・実現したいこと

以下のコードをapp.tsxでstateを管理して他の子コンポーネントにはpropsとして値を渡して表示させるだけにするにはどう書いたらいいのでしょうか?

該当のソースコード

import React from 'react' import { Task } from './Types' type Props = { task: Task handleDone: (task: Task) => void handleDelete: (task: Task) => void } const TaskItem: React.FC<Props> = ({ task, handleDone, handleDelete }) => { return ( <li className={task.done ? 'done' : ''}> <label> <input type="checkbox" className="checkbox-input" onClick={() => handleDone(task)} defaultChecked={task.done} /> <span className="checkbox-label">{ task.title }</span> </label> <button onClick={() => handleDelete(task)} className="btn is-delete" >削除</button> </li> ) } export default TaskItem
import React from 'react' import TaskItem from './TaskItem' import { Task } from './Types' type Props = { tasks: Task[] setTasks: React.Dispatch<React.SetStateAction<Task[]>> } const TaskList: React.FC<Props> = ({ tasks, setTasks }) => { const handleDone = (task: Task) => { setTasks(prev => prev.map(t => t.id === task.id ? { ...task, done: !task.done } : t )) } const handleDelete = (task: Task) => { setTasks(prev => prev.filter(t => t.id !== task.id )) } return ( <div className="inner"> { tasks.length <= 0 ? '登録されたTODOはありません。' : <ul className="task-list"> { tasks.map( task => ( <TaskItem key={task.id} task={task} handleDelete={handleDelete} handleDone={handleDone} /> )) } </ul> } </div> ) } export default TaskList
import React, { useState } from 'react' import { Task } from './Types' type Props = { setTasks: React.Dispatch<React.SetStateAction<Task[]>> tasks: Task[] } const TaskInput: React.FC<Props> = ({ setTasks, tasks }) => { const [ inputTitle, setInputTitle ] = useState<string>('') const [ count, setCount ] = useState<number>(tasks.length + 1) const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { setInputTitle(e.target.value) } const handleSubmit = () => { setCount(count + 1) const newTask: Task = { id: count, title: inputTitle, done: false } setTasks([newTask, ...tasks]) setInputTitle('') } return ( <div> <div className="inputForm"> <div className="inner"> <input type="text" className="input" value={inputTitle} onChange={handleInputChange} /> <button onClick={handleSubmit} className="btn is-primary">追加</button> </div> </div> </div> ) } export default TaskInput

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問