React CheckBoxの判定の仕方

Question

チェックボックスの処理の書き方について困っています。
Listの一行目、または二行目または三行目のチェックボックスがクリックされた時そのtaskのdoneをtrueにするにはどう書いたらいいでしょうか？
どの行のチェックボックスがクリックされたかどうやったらわかるのでしょうか？

export type Task = {
    id: number
    title: string
    done: boolean
}

const App: React.FC = () => {
    const [tasks, setTasks] = useState([])
 
    return (
        <div>
            <TaskInput setTasks={setTasks} tasks={tasks} />
            <TaskList setTasks={setTasks} tasks={tasks} />
        </div>
    )
}

//子コンポーネント
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 (
　　　　{task.map((i) => (
        <li>
            <label>
                <input
                    type="checkbox"
                    className="checkbox-input"
                    onClick={//チェックされたらdoneをtrueにしたい}
                />
                <span className="checkbox-label">{i.title }</span>
            </label>
            <button
                onClick={() => handleDelete(task)}
                className="btn is-delete"
            >削除</button>
        </li>
    )
}
 
export default TaskItem

Comments

[miyabi_pudding]

すみません、Reactは勉強中なのですが、
中かっこ（{}です）の開始と閉じの数が合っていないようなのですが、
それに関してエラーが出てたりしませんか？
{task.map((i) => (
の{に対しての、}が無いようにお見受けします。
案外それで解決するかもですよ。

[thyda.eiqau]

task.map() していますが、task: Taskは配列ではないのでは？
<TaskItem />をどう呼び出しているかもご提示ください。

Answer 1

前提がわからない (<TaskItem /> をどう呼び出しているか等) ままエスパーした箇所もあるので正確ではないかもしれないし、TypeScriptはこの質問を見て初めて書いたのでお作法が違ったりもっと良い書き方があったりするかもしれませんが、とりあえず下記で動くのは動きました。

結局やっていることはシンプルで、 onChange ハンドラでpropsで渡されたhandleDoneをコールして、handleDone側でstateの値を変更すればよいです。

これ以上の解説は前提条件がないと無理ですので適宜追記してください。

/// App.tsx

import React, { useState } from 'react';

type Task = {
  id: number
  title: string
  done: boolean
}

interface TaskListProps {
  tasks: Task[]
  handleDone: (id: number) => void
  handleDelete: (id: number) => void
}

const TaskList: React.FC<TaskListProps> = ({tasks, handleDone, handleDelete}) => {
  return (
    <div>
      {
        tasks.map(task => (
          <li key={task.id}>
            <label>
              <input
                type="checkbox"
                className="checkbox-input"
                checked={task.done}
                onChange={() => handleDone(task.id)}
              />
              <span className="checkbox-label">{task.title}</span>
            </label>
            <button
              onClick={() => handleDelete(task.id)}
              className="btn is-delete"
            >削除</button>
          </li>
        ))
      }
    </div>
  )
}

const App: React.FC = () => {
  const [tasks, setTasks] = useState<Task[]>([{
    id: 42,
    title: "The Answer",
    done: false
  }])

  const handleDone = (id: number) => {
    setTasks(tasks.map(t => {
      t.done = t.id === id? !t.done : t.done
      return t
    }))
    console.table(tasks);
  }

  const handleDelete = (id: number) => {
    setTasks(tasks.filter(t => t.id !== id))
  }

  return (
    <div className="App">
      <TaskList
        tasks={tasks}
        handleDone={handleDone}
        handleDelete={handleDelete}
      />
    </div>
  );
}

export default App;

Comments

[miyabi_pudding]

横槍失礼します。
蛇足で、質問に関係ないですが、
言語名、typescriptでコードカラーリング用意されていますよー
（あんましカラーリング変わらんかもですが）
あと、
type、interface定義時の各プロパティは、末尾にセミコロン入れた方がいいかもです。（Linterで警告でる）
JSのスーパーセットな言語ではありますが、JSと違い、けっこうセミコロンにはうるさい言語な印象があります。

[thyda.eiqau]

おっと、js/build/21a1d1d9da25c445eae2.2.js?1578977354949 (本日現在) でtypescriptのaliasにtsが入っているのでtsでも効くと思ったのですが、別なのですかね。
LinterはTSLintですかね？マジでTypeScript初めて書いたのでEditorにLinterが入ってなかったです。今インストールしてみたところ何の警告も出さないのでconfigがいるかもしれないですね。質問者がどういうruleでやってるかわからないので、よしなに見る側で直していただいてもいい気がします

[miyabi_pudding]

コードカラーリングに関しては失礼しました！そうだったのですね！
あら・・・、どうなんですかね・・・。
私は、VS Codeで、Linter使ってるのですが、
警告発生しているので、設定厳しすぎるのかな・・・。
確かに、それでよさそうですね　汗
コメント大変に失礼しました。

[dsfdsf]

ご回答ありがとうございます。
t.done = t.id === id? !t.done : t.doneはどういう意味なんでしょうか？

[thyda.eiqau]

短縮せずに書くとこうです。
tasks.map((t: Task) => {
if(t.id === id) {
t.done = !t.done;
}
return t;
})
stateの `tasks: Task[]` をmapでループして、各要素を `t: Task` に代入してアクセスしています。
tのidが、クリックイベントの発火元になったidと一致しているなら、そのtのdoneを反転しています (done: trueのときにクリックしたらfalseになり、falseのときにクリックしたらtrueになる)