如何在 React 中添加待办事项的同一输入上编辑待办事项列表？

Question

我是 React js 的初学者，我有一个从 YouTube 获取的项目代码，问题是当我编辑任务时，我想在添加任务的同一输入中编辑它。

其实我不知道如何实现这一点，我希望有人可以帮助我

这里我得到了主要组件： `从'react'导入React； 导入'./App.css'; 从 './components/TodoList' 导入 TodoList；

function App() {
  return (
    <div className='todo-app'>
      <TodoList />
    </div>
  );
}

export default App;`


     Todo.jsx component:
`import React, { useState } from "react";
import { RiCloseCircleLine } from "react-icons/ri";
import { TiEdit } from "react-icons/ti";
import TodoForm from "./TodoForm";

const Todo = ({ todos, updateTodo, completeTodo }) => {
  const [edit, setEdit] = useState({
    id: null,
    value: "",
  });

  function updateSubmit(value) {
    updateTodo(edit.id, value);
    setEdit({
      id: null,
      value: "",
    });
  }

  if (editar.id) {
    return <TodoForm edit={edit} onSubmit={updateSubmit} />;
  }

  return todos.map((todo, index) => (
    <div
      className={todo.isComplete ? "todo-row complete" : "todo-row"}
      key={index}
    >
      <div key={todo.id} onClick={() => completeTodo(todo.id)}>
        {todo.text}
      </div>
      <div className="icons">
        <TiEdit
          onClick={() => setEdit({ id: todo.id, value: todo.text })}
          className="edit-icon"
        />
      </div>
    </div>
  ));
};

export default Todo;`


TodoList.jsx component:
`import React, { useState } from "react";
import TodoForm from "./TodoForm";
import Todo from "./Todo";

function TodoList() {
  const [todos, setTodos] = useState([]);

   const addTodo = (todo) => {
     const newTodos = [todo, ...todos];

    setTodos(newTodos);
  };

  const updateTodo = (todoId, newValue) => {
    if (!newValue.text || /^\s*$/.test(newValue.text)) {
      return;
    }

    setTodos((prev) =>
      prev.map((item) => (item.id === todoId ? newValue : item))
    );
  };

  const completeTodo = (id) => {
    let updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        todo.isComplete = !todo.isComplete;
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  return (
    <React.Fragment>
      <h1>What's the Plan for Today?</h1>
      <TodoForm onSubmit={addTodo} />

      <Todo
        todos={todos}
        completeTodo={completeTodo}
        updateTodo={updateTodo}
      />
    </React.Fragment>
  );
}

export default TodoList;`


 TodoForm component:
`import React, { useState, useEffect, useRef } from "react";

function TodoForm({ editar, onSubmit }) {
  const [input, setInput] = useState(edit ? edit.value : "");

  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  });

  const handleChange = () => {
    setInput(inputRef.current.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!inputRef.current.value || /^\s*$/.test(inputRef.current.value)) {
      return;
    }

    onSubmit({
      id: Math.floor(Math.random() * 10000),
      text: inputRef.current.value,
    });
    setInput("");
  };

  return (
    <form onSubmit={handleSubmit} className="todo-form">
      <React.Fragment>
        <input
          placeholder={edit ? "Update your elemento" : "Add a Todo"}
          value={input}
          onChange={handleChange}
          name="text"
          className={edit ? "todo-input edit" : "todo-input"}
          ref={inputRef}
        />
        <button
          onClick={handleSubmit}
          className={edit ? "todo-button edit" : "todo-button"}
        >
          Update
        </button>
      </React.Fragment>
    </form>
  );
}

export default TodoForm;
`

       

[edit task in another input](https://i.stack.imgur.com/ajma4.png)

[different input](https://i.stack.imgur.com/52R2k.png) 

Answer 1

在

Todo

和

TodoForm

组件中，

editar

不存在。这应该更改为

edit

。还有一个问题是，在

edit

组件中，

TodoForm

可能无法正确传递给

Todo

。

import React, { useState, useEffect, useRef } from 'react';
import { TiEdit } from 'react-icons/ti';

// TODO
const Todo = ({ todos, updateTodo, completeTodo }) => {
  const [edit, setEdit] = useState({
    id: null,
    value: '',
  });

  function updateSubmit(value) {
    updateTodo(edit.id, value);
    setEdit({
      id: null,
      value: '',
    });
  }

  if (edit.id) {
    return <TodoForm edit={edit} onSubmit={updateSubmit} />;
  }

  return todos.map((todo, index) => (
    <div
      className={todo.isComplete ? 'todo-row complete' : 'todo-row'}
      key={index}
    >
      <div key={todo.id} onClick={() => completeTodo(todo.id)}>
        {todo.text}
      </div>
      <div className="icons">
        <TiEdit
          onClick={() => setEdit({ id: todo.id, value: todo.text })}
          className="edit-icon"
        />
      </div>
    </div>
  ));
};

// TODOLIST
function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    const newTodos = [todo, ...todos];

    setTodos(newTodos);
  };

  const updateTodo = (todoId, newValue) => {
    if (!newValue.text || /^\s*$/.test(newValue.text)) {
      return;
    }

    setTodos((prev) =>
      prev.map((item) => (item.id === todoId ? newValue : item))
    );
  };

  const completeTodo = (id) => {
    let updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        todo.isComplete = !todo.isComplete;
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  return (
    <React.Fragment>
      <h1>What's the Plan for Today?</h1>
      <TodoForm onSubmit={addTodo} />

      <Todo todos={todos} completeTodo={completeTodo} updateTodo={updateTodo} />
    </React.Fragment>
  );
}

// TODFORM
function TodoForm({ edit, onSubmit }) {
  const [input, setInput] = useState(edit ? edit.value : '');

  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  });

  const handleChange = () => {
    setInput(inputRef.current.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!inputRef.current.value || /^\s*$/.test(inputRef.current.value)) {
      return;
    }

    onSubmit({
      id: Math.floor(Math.random() * 10000),
      text: inputRef.current.value,
    });
    setInput('');
  };

  return (
    <form onSubmit={handleSubmit} className="todo-form">
      <React.Fragment>
        <input
          placeholder={edit ? 'Update your elemento' : 'Add a Todo'}
          value={input}
          onChange={handleChange}
          name="text"
          className={edit ? 'todo-input edit' : 'todo-input'}
          ref={inputRef}
        />
        <button
          onClick={handleSubmit}
          className={edit ? 'todo-button edit' : 'todo-button'}
        >
          Update
        </button>
      </React.Fragment>
    </form>
  );
}

const styles = {
  app: {
    background: '#eee',
    padding: 20,
    maxWidth: 500,
    margin: '0 auto',
  },
};

function App() {
  return (
    <div style={styles.app}>
      <TodoList />
    </div>
  );
}

export default App;

这是现场直播Stackblitz