ネットアンサー55備忘録

onChange

---

App.js

//trueとfalseの切り替えを行います
  const toggleTodo = (id) => {
    const newTodos = [...todos];
    const todo = newTodos.find((todo) => todo.id === id);
    todo.completed = !todo.completed;
    setTodos(newTodos);
  };

---

Todo.js

const handleTodoClick = () => {
    toggleTodo(todo.id);
};

<label>
     <input
          checked={todo.completed}
          readOnly
          type="checkbox"
          onChange={handleTodoClick}
     />
</label>

onKeyDown

---

  const handleClear = () => {
    //console.log("エンターキーを押しました")
    const newTodos = todos.filter((todo) => !todo.completed);
    setTodos(newTodos);
  }

          <label>
              <input
                  type="checkbox"
                  checked={todo.completed}
                  readOnly
                  onKeyDown={(e) => {
                    if (e.key === 'Enter')
                        //console.log("enterを押しました")
                        handleClear()
                    }
                }
              />
          </label>