如何在react/mysql应用程序中编辑任务？

所以我正在制作一个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>
        )
    }
}

import React，{Component}来自'React'；
从“axios”导入axios；
导出默认类TaskInput扩展组件{
建造师（道具）{
超级（道具）
此.state={
任务：“”，
所有任务：[]，
删除线：{textDecoration:}
}
}
changeHandler=（事件）=>{
console.log（event.target.value）
这是我的国家({
任务：event.target.value，
})
}
handleStrikethrough=（已完成，id）=>{
//！已完成？this.setState（{strikeThrough:{textDecoration:{linethrough}）：this.setState（{strikeThrough:{textDecoration:}}）
//如果（！已完成）{
//console.log（“未完成”，“已完成”）
//this.setState（{strikeThrough:{textdecommunication:{line-through}}）；
//axios.put（“/api/task”{
//已完成：！已完成
//}，id）。然后（response=>console.log（response））
//}其他{
//this.setState（{删除线：{textDecoration:}}）
//axios.put（“/api/task”{
//已完成：！已完成
//}，id）。然后（response=>console.log（response））
// }
}
handleDelete=（任务ID）=>{
delete（“/api/task/”+taskId）。然后（数据=>{
log（“您删除了id为的任务”，data）
})
window.location.reload（）；
}
handleTaskEdit=（）=>{
console.log（“编辑按钮工作”）
}
submitHandler=（事件）=>{
event.preventDefault（）//防止页面刷新
console.log（）
获取（“/api/task”{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
},
正文：JSON.stringify（this.state），
})
.then（res=>res.json（））
.then（数据=>console.log（数据））
.catch（err=>console.log（err））
这是我的国家({
任务：“
})
window.location.reload（）
}
componentDidMount（）{
log（“组件未装载”）
const self=这个；
get（“/api/tasks”）.then（函数（数据）{
自我状态({
所有任务：data.data
})
//console.log（self.state.allTasks[0].task）
})
}
render（）{
const{strikeThrough，task，allTasks}=this.state；//分解状态
返回(
创建任务：





{this.state.allTasks.map（task=>(
this.handleStrikethrough（task.completed，task.id）}className=“tasks”>{task.task}
this.handleDelete（task.id）}>x
编辑

)
)}

)
}
}

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

您可以在其相应的编辑按钮上设置任务ID，然后单击“编辑”按钮时，使用ID获取任务并将该任务发送到编辑组件。

首先，您可以将任务名称设置为任务属性，并设置可编辑任务的ID:

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

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 = () => {
    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
      )})
    })
}

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

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

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 = () => {
    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
      )})
    })
}

最后，您需要更新submitHandler和handleDelete:

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

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 = () => {
    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
      )})
    })
}

---

首先，您可以将任务名称设置为任务属性，并设置可编辑任务的ID:

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

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 = () => {
    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
      )})
    })
}

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

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

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 = () => {
    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
      )})
    })
}

最后，您需要更新submitHandler和handleDelete:

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

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 = () => {
    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
      )})
    })
}

方法如下：

使用名为

editTaskID

的状态变量，并将默认值保持为null。在“编辑”按钮上，设置

handleTaskEdit

的功能，以便将

editTaskID

设置为单击编辑按钮的特定任务ID

在渲染任务列表项的映射函数中，添加以下条件：

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

{this.state.allTasks.map（任务=>
(
this.handleStrikethrough（task.completed，task.id）}
className=“任务”>
{
这个是.editTaskID
?
：task.task
}
this.handleDelete（task.id）}>x
编辑

)
)
}

现在将检查在呈现时editTaskID是否已设置为null的条件。如果为空，则所有任务都将以纯文本的形式出现，否则将以文本框的形式出现。您还可以在

allTasks[editTaskID]

的帮助下，将该值添加到编辑任务输入字段中

在编辑按钮的

handleTaskEdit

功能上，确保将

allTasks[editTaskID]

设置为值

editTaskName

，并将状态变量

editTaskID

设置为空。 调用必要的后端端点reflec