主页 / coding / 问题 / 78782334
Accepted
Tony
Asked: 2024-07-23 16:17:56 +0800 CST

如何使用 React 在 Typescript 中编辑

  • 772

我对 Typescript 和 React 还很陌生，我创建了一个尽可能简单的待办事项列表。到目前为止，我可以添加、显示和删除一个项目，但我无法编辑它。我可以单击行，正确的文本会出现在文本框中，但我无法保存它。我希望有人能给我指明正确的方向。

import { Box, TextField, Button } from "@mui/material";
import { useState } from "react";

export const List = () => {
  const [task, setTask] = useState("");
  const [taskList, setTaskList] = useState(['']);
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState<string>(task);

  
  const handleSubmit = () => {
    if (task.trim() !== "") {
      setTaskList((t) => [...t, task]);
      setTask("");
    }
  };

  const handleEditSubmit = (e:any) => {
    let text = e.target.value;
    setEditText(text);
    console.log(editText);
  }

  const handleDelete = (index: number) => {
    const deleteTasks = taskList.filter((_, i) => i !== index);
    setTaskList(deleteTasks);
  };

  const handleEdit = (index: number) => {
    setIsEditing(true);
    const selectedTask = taskList.find((_, i) => i === index);
    const unquoted = JSON.stringify(selectedTask).replace(/"/g, "");
    setTask(unquoted);
  };

  return (
    <Box>
      {isEditing ? (
    <>
      <TextField
        label="Edit Task"
        variant="outlined"
        onChange={(e) => setTask(e.target.value)}
        value={task}
      />
      <Button variant="contained" type="submit" onClick={(e) => handleEditSubmit}>
        Submit Edit
      </Button>
    </>
      ) : (
    <>
      <TextField
        label="New Task"
        variant="outlined"
        onChange={(e) => setTask(e.target.value)}
        value={task}
      />
      <Button variant="contained" type="submit" onClick={handleSubmit}>
        Submit
      </Button>
    </>
      )}
      <ol>
    {taskList.map((task, index) => (
      <li key={index}>
        <span>{task}</span>
        <button onClick={() => handleDelete(index)}>Delete</button>
        <button onClick={() => handleEdit(index)}>Edit</button>
      </li>
    ))}
      </ol>
    </Box>
  );
};
reactjs

1 个回答

  1. Best Answer

    使用编辑的文本更新任务列表：提交编辑时，您需要使用新任务值更新任务列表中的任务。目前，handleEditSubmit 正在设置 editText，但未使用它来更新任务列表。

    编辑模式的状态管理：您应该管理正在编辑的任务。您需要一个额外的状态来跟踪正在编辑的任务的索引。

    import { Box, TextField, Button } from "@mui/material";
import { useState } from "react";

export const List = () => {
  const [task, setTask] = useState("");
  const [taskList, setTaskList] = useState<string[]>([]);
  const [isEditing, setIsEditing] = useState(false);
  const [editIndex, setEditIndex] = useState<number | null>(null);

  const handleSubmit = () => {
    if (task.trim() !== "") {
      setTaskList((t) => [...t, task]);
      setTask("");
    }
  };

  const handleEditSubmit = () => {
    if (editIndex !== null && task.trim() !== "") {
      setTaskList((tasks) =>
        tasks.map((t, index) => (index === editIndex ? task : t))
      );
      setIsEditing(false);
      setTask("");
      setEditIndex(null);
    }
  };

  const handleDelete = (index: number) => {
    const deleteTasks = taskList.filter((_, i) => i !== index);
    setTaskList(deleteTasks);
  };

  const handleEdit = (index: number) => {
    setIsEditing(true);
    setEditIndex(index);
    setTask(taskList[index]);
  };

  return (
    <Box>
      {isEditing ? (
        <>
          <TextField
            label="Edit Task"
            variant="outlined"
            onChange={(e) => setTask(e.target.value)}
            value={task}
          />
          <Button variant="contained" onClick={handleEditSubmit}>
            Submit Edit
          </Button>
        </>
      ) : (
        <>
          <TextField
            label="New Task"
            variant="outlined"
            onChange={(e) => setTask(e.target.value)}
            value={task}
          />
          <Button variant="contained" onClick={handleSubmit}>
            Submit
          </Button>
        </>
      )}
      <ol>
        {taskList.map((task, index) => (
          <li key={index}>
            <span>{task}</span>
            <button onClick={() => handleDelete(index)}>Delete</button>
            <button onClick={() => handleEdit(index)}>Edit</button>
          </li>
        ))}
      </ol>
    </Box>
  );
};
    • 0

相关问题