ReactでTodoアプリを作る #4 編集機能

const [editingId, setEditingId] = useState(null);

function updateTodoText(id, newText) {
  const trimmed = newText.trim();
  if (!trimmed) {
    deleteTodo(id);
    return;
  }
  setTodos(prev => prev.map(todo =>
    todo.id === id ? { ...todo, text: trimmed } : todo
  ));
}

import { useState, useRef, useEffect } from 'react';

function TodoItem({ todo, isEditing, onToggle, onDelete, onStartEdit, onFinishEdit }) {
  const [draft, setDraft] = useState(todo.text);
  const inputRef = useRef(null);

  useEffect(() => {
    if (isEditing) {
      setDraft(todo.text);
      inputRef.current?.focus();
      inputRef.current?.select();
    }
  }, [isEditing, todo.text]);

  function commit() {
    onFinishEdit(todo.id, draft);
  }

  function cancel() {
    onFinishEdit(todo.id, todo.text);  // 元の値に戻す
  }

  function handleKeyDown(e) {
    if (e.key === 'Enter') commit();
    else if (e.key === 'Escape') cancel();
  }

  return (
    <li style={{
      display: 'flex',
      alignItems: 'center',
      gap: '8px',
      padding: '8px',
      borderBottom: '1px solid #eee',
      opacity: !isEditing && todo.completed ? 0.5 : 1,
    }}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
        disabled={isEditing}
      />
      {isEditing ? (
        <input
          ref={inputRef}
          type="text"
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onBlur={commit}
          onKeyDown={handleKeyDown}
          style={{ flex: 1, padding: '4px' }}
        />
      ) : (
        <span
          onDoubleClick={() => onStartEdit(todo.id)}
          style={{
            flex: 1,
            textDecoration: todo.completed ? 'line-through' : 'none',
            cursor: 'text',
          }}
        >
          {todo.text}
        </span>
      )}
      {!isEditing && (
        <button onClick={() => onDelete(todo.id)}>削除</button>
      )}
    </li>
  );
}

export default TodoItem;

import { useState } from 'react';
import TodoForm from './TodoForm';
import TodoFilter from './TodoFilter';
import TodoStats from './TodoStats';
import TodoList from './TodoList';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [filter, setFilter] = useState('all');
  const [editingId, setEditingId] = useState(null);

  function addTodo(text) {
    const newTodo = {
      id: crypto.randomUUID(),
      text,
      completed: false,
    };
    setTodos(prev => [newTodo, ...prev]);
  }

  function deleteTodo(id) {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  }

  function toggleTodo(id) {
    setTodos(prev => prev.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  }

  function clearCompleted() {
    setTodos(prev => prev.filter(todo => !todo.completed));
  }

  function startEdit(id) {
    setEditingId(id);
  }

  function finishEdit(id, newText) {
    const trimmed = newText.trim();
    if (!trimmed) {
      deleteTodo(id);
    } else {
      setTodos(prev => prev.map(todo =>
        todo.id === id ? { ...todo, text: trimmed } : todo
      ));
    }
    setEditingId(null);
  }

  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed;
    if (filter === 'completed') return todo.completed;
    return true;
  });

  return (
    <div style={{ maxWidth: '500px', margin: '0 auto', padding: '24px' }}>
      <h1>Todo</h1>
      <TodoForm onAdd={addTodo} />
      <TodoFilter filter={filter} onChange={setFilter} />
      <TodoStats todos={todos} onClearCompleted={clearCompleted} />
      <TodoList
        todos={filteredTodos}
        filter={filter}
        totalCount={todos.length}
        editingId={editingId}
        onToggle={toggleTodo}
        onDelete={deleteTodo}
        onStartEdit={startEdit}
        onFinishEdit={finishEdit}
      />
    </div>
  );
}

export default TodoApp;

import TodoItem from './TodoItem';

const FILTER_LABEL = {
  all: 'タスク',
  active: '未完了の項目',
  completed: '完了した項目',
};

function TodoList({ todos, filter, totalCount, editingId, onToggle, onDelete, onStartEdit, onFinishEdit }) {
  if (todos.length === 0) {
    if (totalCount === 0) {
      return <p style={{ color: '#888' }}>タスクがありません。新しく追加してみてください。</p>;
    }
    return <p style={{ color: '#888' }}>{FILTER_LABEL[filter]}がありません。</p>;
  }

  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          isEditing={todo.id === editingId}
          onToggle={onToggle}
          onDelete={onDelete}
          onStartEdit={onStartEdit}
          onFinishEdit={onFinishEdit}
        />
      ))}
    </ul>
  );
}

export default TodoList;

const draftRef = useRef(todo.text);
return <input value={draftRef.current} onChange={(e) => { draftRef.current = e.target.value; }} />;

useEffect(() => {
  if (isEditing) inputRef.current?.focus();
}, []);