Javascript 如何将列表项更改为react中编辑功能的输入？

我开始学习如何反应，并列出了一张待办事项清单。具有添加、删除、拖放和编辑功能

对于我的编辑，我获取列表项字符串并将其放置在用于添加的输入中，如果我再次按“添加”，我的列表项将更改。我想重写这个函数。我想将列表项转换为输入，当我再次按下按钮时，我想用该输入替换列表项值

我应该使用Javascript中的隐藏输入？我不确定是否可以在react中显示/隐藏元素。还是应该创建一个切换方法

以下是我的HTML代码：

<div id="app"> </div>

以下是我的代码：

import React, { Component } from 'react';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const data=[];

const ListItem = SortableElement(({item,i,editTask,deleteTask}) => (
     <div className='list-item'>
     <p>{item.title}

    <button className='button-edit'
    onClick={()=> editTask(item,i)}>Edit </button>
    <button className='button-delete'
    onClick={()=> deleteTask(item,i)}>Delete </button>
    </p>
    </div>
));

var toggle = false;
const List= SortableContainer(({editTask,deleteTask}) => {
 var items = data.map((item,i) => (
        <ListItem
            item={item}
            index={i}
            editTask={editTask}
            deleteTask={deleteTask}
            key={i}
        />
    ));

    return (
        <div>
        {items}
        </div>
  );
});

class App extends React.Component {
    constructor (props) {
        super(props);
        this.updateTask = this.updateTask.bind(this);
        this.editTask = this.editTask.bind(this);
        this.deleteTask = this.deleteTask.bind(this);
        this.addTask = this.addTask.bind(this);
        this.state = {
            taskName:'',
            data: [],
            toggle: true
        };
    }


    updateTask(e){
        this.setState({taskName:e.target.value});
    }


    addTask(e){
        e.preventDefault();
        if(!this.state.taskName){
            return;
        }
      data.push({
            title: this.state.taskName
        });
        this.state.taskName='';
        this.setState(this.state);
    }

    editTask(task,i){

    this.state.taskName =task.title;
    this.state.data.splice(i,1);
    this.setState(this.state);
    }

    deleteTask(i){
     data.splice(i,1);
       this.setState(this.state); 
    }


  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
     data: arrayMove(this.state.data, oldIndex, newIndex),
    });
  };

    render(){
        return (
            <div>

            <h> To do List: </h>
            <form onSubmit={this.addTask}>
            <input type='text' placeholder='Task'
            value={this.state.taskName}
            onChange={this.updateTask} />
            <input type='submit' className='buttonAdd' value='Add' />
            </form>

          <List
             editTask={this.editTask}
          deleteTask={this.deleteTask}
          onSortEnd={this.onSortEnd} />


        </div>

        );
    }
}

export default App;

import React，{Component}来自'React'；
从'react sortable hoc'导入{SortableContainer，SortableElement，arrayMove}；
常量数据=[]；
const ListItem=SortableElement（{item，i，editTask，deleteTask}）=>(
{item.title}
编辑任务（项目，i）}>编辑
deleteTask（项目，i）}>删除

));
var-toggle=false；
const List=SortableContainer（{editTask，deletetetask}）=>{
var items=data.map（（item，i）=>(
));
返回(
{items}
);
});
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.updateTask=this.updateTask.bind（this）；
this.editTask=this.editTask.bind（this）；
this.deleteTask=this.deleteTask.bind（this）；
this.addTask=this.addTask.bind（this）；
此.state={
任务名：“”，
数据：[]，
切换：真
};
}
更新任务（e）{
this.setState（{taskName:e.target.value}）；
}
添加任务（e）{
e、 预防默认值（）；
如果（！this.state.taskName）{
返回；
}
数据推送({
标题：this.state.taskName
});
this.state.taskName=''；
this.setState（this.state）；
}
编辑任务（任务，i）{
this.state.taskName=task.title；
该状态数据拼接（i，1）；
this.setState（this.state）；
}
删除任务（一）{
数据拼接（i，1）；
this.setState（this.state）；
}
onSortEnd=（{oldIndex，newIndex}）=>{
这是我的国家({
数据：arrayMove（this.state.data、oldIndex、newIndex），
});
};
render（）{
返回(
待办事项清单：
);
}
}
导出默认应用程序；

您可以在react中使用隐藏/显示元素

基本上，您可以利用更新重新呈现组件的状态和事实，以便可以呈现ListItem或输入

下面是我举的一个例子： 如果您需要代码示例，请告诉我