以编辑形式更新数据反应答案

【问题标题】：updating data in edit-form react以编辑形式更新数据反应
【发布时间】：2023-01-20 18:03:53
【问题描述】：

我有一种待办事项，但一个对象中有几行。

我需要在编辑其中一个字段并按下保存按钮时，保存才会起作用。

现在，为了保存更改，需要更改所有三个输入。

应用程序.js

function App(props) {
  const [tasks, setTasks] = useState(props.tasks);
  function editTask(id, newName, newTranslate, newNote) {
    const editedTaskList = tasks.map((task) => {
      if (id === task.id) {
        return { ...task, name: newName, translate: newTranslate, note: newNote };
      }
      return task;
    });
    setTasks(editedTaskList);
  }

  const taskList = tasks
    .map((task) => (
      <Todo
        id={task.id}
        name={task.name}
        translate={task.translate}
        note={task.note}
        completed={task.completed}
        key={task.id}
        editTask={editTask}
      />
    ));

  return (
    <div className="todoapp stack-large">
      <ul
        className="todo-list stack-large stack-exception"
        aria-labelledby="list-heading">
        {taskList}
      </ul>
    </div>
  );
}

export default App;

我认为问题出在 todo 文件中的处理程序上，很可能需要从状态中获取以前的数据，如果字段没有更改，则在新状态中使用更改后的数据。我试图做这样的事情，但我找不到任何东西。

待办事项

export default function Todo(props) {
  const [isEditing, setEditing] = useState(false);
  const [newName, setNewName] = useState('');
  const [newTranslate, setNewTranslate] = useState('');
  const [newNote, setNewNote] = useState('');

  function handleChange(e) {
    setNewName(e.target.value);
  }
  function handleChangeTranslate(e) {
    setNewTranslate(e.target.value);
  }
  function handleChangeNote(e) {
    setNewNote(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (!newName.trim()|| !newTranslate.trim() || !newNote.trim()) {
      return;
    }
    props.editTask(props.id, newName, newTranslate, newNote);
    setNewName("");
    setNewTranslate("");
    setNewNote("");
    setEditing(false);
  }

  const editingTemplate = (
    <form className="stack-small" onSubmit={handleSubmit}>
      <div className="form-group">
        <label className="todo-label" htmlFor={props.id}>
          New name for {props.name}
        </label>
        <input
          id={props.id}
          className="todo-text"
          type="text"
          value={newName || props.name}
          onChange={handleChange}
        />
        <input
          id={props.id}
          className="todo-text"
          type="text"
          value={newTranslate || props.translate}
          onChange={handleChangeTranslate}
        />
        <input
          id={props.id}
          className="todo-text"
          type="text"
          value={newNote || props.note}
          onChange={handleChangeNote}
        />
        
      </div>
      <div className="btn-group">

        <button
          type="button"
          className="btn todo-cancel"
          onClick={() => setEditing(false)}
        >
          Cancel
        </button>
        <button type="submit" className="btn btn__primary todo-edit">
          Save
          
        </button>
      </div>
    </form>
  );

  const viewTemplate = (
    <div className="stack-small">
      <div className="c-cb">
          
          <label className="todo-label" htmlFor={props.id}>
            {props.name}
          </label>
          <label className="todo-label" htmlFor={props.id}>
            {props.translate}
          </label>
          <label className="todo-label" htmlFor={props.id}>
            {props.note}
          </label>
          
        </div>
        <div className="btn-group">
        <button
          type="button"
          className="btn"
          onClick={() => setEditing(true)}
          >
            Edit <span className="visually-hidden">{props.name}</span>
          </button>
        
        </div>
    </div>
  );
  return <li className="todo">{isEditing ? editingTemplate : viewTemplate}</li>;
}

【问题讨论】：

你在期待什么？
我希望在更改一个或两个字段时能够保存表单。现在只能通过更改三个字段来保存
我能够单独保存字段。你能详细说明你的查询吗
当我需要更改第一个字段而其他字段不需要时，我无法保存，保存按钮不起作用，需要更改三个字段才能保存

标签： reactjs

【解决方案1】：

通过反复试验，我找到了解决问题的方法。

有必要将数据从数组传输到新状态，这将是它的初始数据

Todo.js 文件

export default function Todo({name, translate, note, editTask, id}) {
  const [isEditing, setEditing] = useState(false);
  const [newName, setNewName] = useState(name);
  const [newTranslate, setNewTranslate] = useState(translate);
  const [newNote, setNewNote] = useState(note);

【讨论】：