如何在一个reactmysql应用程序中编辑一个任务？

Question

我正在做一个ToDo应用，但到目前为止，我只能创建一个任务，或者删除它。现在我想做另一个功能，我可以通过点击编辑按钮来编辑特定的任务，然后它将改变任务到一个输入区域，在那里我可以编辑任务名称。谁能帮我解决这个问题？它现在的样子显示在下面。

我的代码现在在下面。

import React, { Component } from 'react';
import axios from "axios";

export default class TaskInput extends Component {
    constructor(props) {
        super(props)

        this.state = {
            task: " ",
            allTasks: [],
            strikeThrough: {textDecoration:""}
        }
    }

    changeHandler = (event) => {
        console.log(event.target.value)
        this.setState({
            task: event.target.value,
        })
    }

    handleStrikethrough = (completed, id) => {
    //    !completed ? this.setState({strikeThrough:{textDecoration: "line-through"}})  : this.setState({strikeThrough:{textDecoration:""}})
            // if (!completed) {
            //     console.log("not completed", !completed)
            //     this.setState({strikeThrough:{textDecoration: "line-through"}});
            //     axios.put("/api/task", {
            //         completed: !completed
            //     }, id).then(response => console.log(response))
            // } else {
            //     this.setState({strikeThrough:{textDecoration:""}})
            //     axios.put("/api/task", {
            //         completed: !completed
            //     }, id).then(response => console.log(response))
            // }
    }

    handleDelete = (taskId) => {
        axios.delete("/api/task/" + taskId).then(data => {
            console.log("You deleted the task with an id of ", data)
        })
        window.location.reload();
    }

    handleTaskEdit = () => {
        console.log("edit button worked")
    }

    submitHandler = (event) => {
        event.preventDefault() //to prevent page refresh
        console.log()

        fetch("/api/task", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(this.state),

        })
            .then(res => res.json())
            .then(data => console.log(data))
            .catch(err => console.log(err))
        this.setState({
            task: ""
        })
        window.location.reload()
    }

    componentDidMount() {
        console.log("component did mount")

        const self = this;
        axios.get("/api/tasks").then(function (data) {
            self.setState({
                allTasks: data.data
            })
            // console.log(self.state.allTasks[0].task)
        })
    }

    render() {
        const {strikeThrough, task, allTasks} = this.state; //destructuring the state
        return (
            <div>
                <form onSubmit={this.submitHandler} >
                    <label style={{ margin: "5px 0px" }}>Create a Task:</label>
                    <input value={this.state.task} onChange={this.changeHandler} style={{ width: "100%" }}></input>
                    <input style={{ padding: "5px", marginTop: "5px" }} type="submit"></input>
                </form>
                <hr></hr>
                <br></br>
                <ul>
                    {this.state.allTasks.map(task => (
                        <li style={strikeThrough} onClick={()=>this.handleStrikethrough(task.completed, task.id)} className="tasks">{task.task}
                        <button onClick = {() => this.handleDelete(task.id)}>x</button>
                        <button onClick={this.handleTaskEdit}>edit</button>
                        </li>
                    )
                    )}
                </ul>
            </div>
        )
    }
}

Answer 1

你可以在其对应的编辑按钮上设置任务ID，然后当点击编辑按钮时使用ID获取任务，并将该任务发送到编辑组件。

Answer 2

首先是handleTaskEdit，这里你将任务名称设置为任务属性，并设置可编辑任务的ID。

handleTaskEdit = id =>
  this.setState({ task: this.state.allTasks.find(el => el.id === id).task })

其次，创建两个新方法，createTask和updateTask。

createTask = () => {
        fetch("/api/task", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({task: this.state.task}),

        })
            .then(res => res.json())
            .then(data => this.setState({
              task: '', 
              allTasks: [...this.state.allTasks, data]}))
            .catch(err => console.log(err))
}
updateTask = () => {
    fetch("/api/task", {
        method: "PATCH",
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({task: this.state.task, id: this.state.editableTaskId}),

    })
        .then(res => res.json())
        .then(data => this.setState({
          task: '',
          editableTaskId: null,
          allTasks: this.state.allTasks.map(el => 
          el.id === data.id ? data : el)})) // Or take new name and id from state
        .catch(err => console.log(err))
}

最后，你需要更新submitHandler和handleDelete。

submitHandler = () => {
    if (this.state.editableTaskId) {
      this.updateTask();
    } else {
      this.createTask()
    }
}
handleDelete = (taskId) => {
    axios.delete("/api/task/" + taskId).then(data => {
      this.setState({allTasks: this.state.allTasks.filter(el =>
        el.id !== data.id
      )})
    })
}

Answer 3

这里的方法是：

有一个状态变量叫做 editTaskID 并保持默认值为空。在编辑按钮上设置 handleTaskEdit 以这样的方式，它设置了 editTaskID 到点击了编辑按钮的那个特定任务ID。

在渲染任务列表项的map函数中，添加一个条件，如。

{this.state.allTasks.map(task =>
             (
               <li style={strikeThrough}
                 onClick={()=>this.handleStrikethrough(task.completed, task.id)} 
                 className="tasks">
                 {
                   this.editTaskID
                   ?<input 
                        value={this.state.editTaskName} 
                        /*supposing editTaskName to be state variable that stores 
                        the edit textfield content.*/ 
                        onChange={this.changeEditHandler} style={{ width: "80%" }}>
                    </input>
                  :task.task
                 }
               <button onClick = {() => this.handleDelete(task.id)}>x</button>
               <button onClick={this.handleTaskEdit}>edit</button>
              </li>
            )
           )
}

这将检查editTaskID是否在渲染时被设置为null。如果它是空的，所有的任务将以纯文本的形式出现，否则它将以文本框的形式出现。你也可以在编辑任务输入框中添加值，借助于 allTasks[editTaskID].

关于 handleTaskEdit 功能的编辑按钮，请务必将编辑按钮的 allTasks[editTaskID] 价值 editTaskName 并设置状态变量 editTaskID 为null.调用必要的后台端点来反映你的数据库中的变化。

希望对你有所帮助。谢谢。