所以我正在做一个待办事项应用，但到目前为止，我只能创建一个任务，或删除它。现在我正在尝试做另一个功能，我可以编辑特定的任务，通过点击编辑按钮，然后它会改变任务到一个输入区，我可以编辑任务名称。有人能帮助我吗？它现在的外观如下所示。

我的代码如下：

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