Javascript 如何使数组可编辑

我想让ul中的列表可编辑。但是我不知道怎么做。我有删除功能，但无法编辑。目前情况也是如此。我在输入中写入一些内容，它将其添加到列表中，并通过单击它来删除，但我需要一个编辑功能

这是我正在做的一个简单的待办事项清单

**TodoItems.js**
import React, { Component } from 'react';

class TodoItems extends Component {
    constructor(props) {
        super(props);
        this.createTasks = this.createTasks.bind(this);
    }
    createTasks(item) {
        return (
          <div>
            <li
              onClick={() => this.delete(item.key)}
              key={item.key}
            >
              {item.text}
            </li><p onClick={() => this.edit(item.key)}>Edit</p>
          </div>
        )
    }

    delete(key) {
        console.log("Key is: " + key);
        this.props.delete(key);
    }

    edit(key) {
        this.props.edit(key);
    }

    render() {
        var todoEntries = this.props.entries;
        var listItems = todoEntries.map(this.createTasks)

        return (
            <ul className="theList">
                {listItems}
            </ul>
        )
    }
}

**TodoItems.js**
从“React”导入React，{Component}；
类TodoItems扩展组件{
建造师（道具）{
超级（道具）；
this.createTasks=this.createTasks.bind（this）；
}
createTasks（项目）{
返回(
this.delete（item.key）}
key={item.key}
>
{item.text}
this.edit（item.key）}>edit
)
}
删除（键）{
console.log（“键为：“+Key”）；
此.props.delete（键）；
}
编辑（键）{
此.props.edit（键）；
}
render（）{
var todoEntries=this.props.entries；
var listItems=todoEntries.map（this.createTasks）
返回(

{listItems}

)
}
}

TodoList.js

export default TodoItems;

import React, {Component } from 'react';
import TodoItems from './TodoItems';

class TodoList extends Component {
    constructor(props) {
        super(props);

        this.state = {
            items: []
        };
        this.addItem = this.addItem.bind(this);
        this.deleteItem =  this.deleteItem.bind(this);
    }

    addItem(e) {
        if (this._inputElement.value !== "") {
            var newItem = {
                text: this._inputElement.value,
                key: Date.now()
            };

            this.setState((prevState) => {
                return {
                    items: prevState.items.concat(newItem)
                };
            });
        }

        this._inputElement.value = "";

        console.log(this.state.items);

        e.preventDefault();
    }

    deleteItem(key) {
        console.log("Key is deleteItem:" + key);
        console.log("Items at delete: " + this.state.items);
        var filteredItems = this.state.items.filter(function (item){
            return (item.key !== key)
        });

        this.setState({
            items: filteredItems
        });
    }

    editItem(key) {

    }

    render() {
        return (
            <div className="todoListMain" >
                <div className="header">
                    <form onSubmit={this.addItem}>
                        <input ref={(a) => this._inputElement = a}
                            placeholder="enter task">
                        </input>
                        <button type="submit">add</button>
                    </form>
                </div>
                <TodoItems entries={this.state.items}
                            delete={this.deleteItem}/>
            </div>
        )
    }
}

export default TodoList;

将默认值导出到文档；
从“React”导入React，{Component}；
从“/TodoItems”导入TodoItems；
类TodoList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：[]
};
this.addItem=this.addItem.bind（this）；
this.deleteItem=this.deleteItem.bind（this）；
}
增补（e）{
if（this.\u inputElement.value！==“”）{
var newItem={
text:this.\u inputElement.value，
关键字：Date.now（）
};
this.setState（（prevState）=>{
返回{
项目：prevState.items.concat（新项目）
};
});
}
此项。_inputElement.value=“”；
console.log（this.state.items）；
e、 预防默认值（）；
}
删除项（键）{
console.log（“Key是deleteItem:+Key”）；
log（“删除时的项：+this.state.Items”）；
var filteredItems=this.state.items.filter（函数（项）{
返回（item.key！==key）
});
这是我的国家({
项目：filteredItems
});
}
编辑项（键）{
}
render（）{
返回(
这个.\u inputElement=a}
占位符=“输入任务”>
添加
)
}
}
将默认值导出到列表；

这个问题可以通过使用HTML元素的contentEditable属性来解决。 它还需要两个按钮“编辑/完成”和一个“删除”按钮。 选择“编辑”后，列表项将变为可编辑，可以进行更改。单击“完成”后，更改将保存在状态项中

class TodoItems extends Component {
constructor(props) {
super(props);
this.createTasks = this.createTasks.bind(this);
this.state = {showEditButton:true}
}
createTasks(item) {
   return 
   <div><li key={item.key}  contentEditable={item.editable}> {item.text} </li>
     <p onClick={() => this.delete(item.key)}>Delete</p>
      {this.state.showEditButton?<p onClick={() => this.edit(item.key)}>Edit</p>:<p onClick={() => this.done(item.key)}>Done</p>}
   </div>
   }

delete(key) {
console.log("Key is: " + key);
this.props.delete(key);
}

edit(key) {
this.props.edit(key);
this.setState({showEditButton:false})
}
done(key){
this.props.done(key);
this.setState({showEditButton:true})
}

render() {
var todoEntries = this.props.entries;
var listItems = todoEntries.map(this.createTasks)

return (
    <ul className="theList">
        {listItems}
    </ul>
 )
 }
}

类TodoItems扩展组件{
建造师（道具）{
超级（道具）；
this.createTasks=this.createTasks.bind（this）；
this.state={showEditButton:true}
}
createTasks（项目）{
返回
{item.text}
this.delete（item.key）}>delete
{this.state.showEditButton？
this.edit（item.key）}>edit
：
this.done（item.key）}>done
}
}
删除（键）{
console.log（“键为：“+Key”）；
此.props.delete（键）；
}
编辑（键）{
此.props.edit（键）；
this.setState（{showEditButton:false}）
}
完成（关键）{
这个。道具。完成（关键）；
this.setState（{showEditButton:true}）
}
render（）{
var todoEntries=this.props.entries；
var listItems=todoEntries.map（this.createTasks）
返回(

{listItems}

)
}
}

TodoList组件更改如下

class TodoList extends Component {
 constructor(props) {
 super(props);
 this.state = {
    items: []
  };
this.addItem = this.addItem.bind(this);
this.deleteItem =  this.deleteItem.bind(this);
this.editItem = this.editItem.bind(this);
this.doneItem = this.doneItem.bind(this);
}

addItem(e) {
  if (this._inputElement.value !== "") {
    var newItem = {
        text: this._inputElement.value,
        key: Date.now(),
        editable:false
    };

    this.setState((prevState) => {
        return {
            items: prevState.items.concat(newItem)
        };
    });
 }

this._inputElement.value = "";

console.log(this.state.items);

e.preventDefault();
}

deleteItem(key) {
var filteredItems = this.state.items.filter(function (item){
    return (item.key !== key)
});

 this.setState({
    items: filteredItems
});
}

editItem(key) {

 var itemsCopy = this.state.items;
 itemsCopy.map(h=>{if(h.key==key)h.editable=true})
 this.setState({items:itemsCopy})
}
doneItem(key){

var itemsCopy = this.state.items;
itemsCopy.map(h=>{if(h.key==key)h.editable=false})
this.setState({items:itemsCopy})
}

render() {
return (
    <div className="todoListMain" >
        <div className="header">
            <form onSubmit={this.addItem}>
                <input ref={(a) => this._inputElement = a}
                    placeholder="enter task">
                </input>
                <button type="submit">add</button>
            </form>
        </div>
        <TodoItems entries={this.state.items}
           delete={this.deleteItem} edit={this.editItem} done={this.doneItem}/>
    </div>
   )
 }
}

类TodoList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：[]
};
this.addItem=this.addItem.bind（this）；
this.deleteItem=this.deleteItem.bind（this）；
this.editItem=this.editItem.bind（this）；
this.doneItem=this.doneItem.bind（this）；
}
增补（e）{
if（this.\u inputElement.value！==“”）{
var newItem={
text:this.\u inputElement.value，
键：Date.now（），
可编辑：false
};
this.setState（（prevState）=>{
返回{
项目：prevState.items.concat（新项目）
};
});
}
此项。_inputElement.value=“”；
console.log（this.state.items）；
e、 预防默认值（）；
}
删除项（键）{
var filteredItems=this.state.items.filter（函数（项）{
返回（item.key！==key）
});
这是我的国家({
项目：filteredItems
});
}
编辑项（键）{
var itemsCopy=this.state.items；
map（h=>{if（h.key==key）h.editable=true}）
this.setState（{items:itemsCopy}）
}
doneItem（钥匙）{
var itemsCopy=this.state.items；
map（h=>{if（h.key==key）h.editable=false}）
this.setState（{items:itemsCopy}）
}
render（）{
返回(
这个.\u inputElement=a}
占位符=“输入任务”>
添加
)
}
}

您应该添加另一个组件，我们将其称为

TodoItem

，这样您就可以单独管理每个项目中的状态。添加两个事件来处理编辑名称时的输入更改，仅此而已

另外，不建议将您的

道具

中的一个称为

键

，因为React.js在内部使用它来检测集合中的一个元素是否被更改

而且

div

元素不允许作为

ul

的子元素，因此我建议您将

ul

替换为

div

示例

let Component=React.Compo