代码之家 › 专栏 › 技术社区 › Tony

如何使用react在Typescript中编辑

typescript reactjs

-1

Tony · 技术社区 · 2 月前

我对带有react的Typescript非常陌生,我创建了一个尽可能简单的待办事项列表。我已经做到了可以添加、显示和删除项目,但无法对其进行编辑。我可以单击行,正确的文本会出现在文本框中,但无法保存。我希望有人能把我带到正确的方向。

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>
  );
};

1 回复 | 直到 2 月前

Rado HT Simarmata 2 月前

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

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

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>
  );
};