Javascript 单击“删除”按钮时删除所有项目，以及如何使用React.js实现编辑/更新功能

我是

React.js的新手，需要实现删除和更新功能。这里我已经做了一些编码，但是如果删除一个元素，它将从数组列表中删除所有元素

这是我的密码：

TodoList.js：

import React, { Component } from "react";
import TodoItems from "./TodoItems";
import "./TodoList.css";
class TodoList extends Component {
  constructor(props, context){
    super(props, context);
    this.state={
      items:[]
    }
    this.addItem=this.addItem.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.editItem = this.editItem.bind(this);
  }
  addItem(e){
    var itemArray = this.state.items;
    if (this.inputElement.value !== '') {
      itemArray.unshift({
        text:this.inputElement.value,
        key:Date.now()
      })
      this.setState({
        items:itemArray
      })
      this.inputElement.value='';
    }
    e.preventDefault();
  }
  deleteItem(key) {
    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} edit={this.editItem}/>
      </div>
    );
  }
}

export default TodoList;

import React，{Component}来自“React”；
从“/TodoItems”导入TodoItems；
导入“/TodoList.css”；
类TodoList扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
这个州={
项目：[]
}
this.addItem=this.addItem.bind（this）；
this.deleteItem=this.deleteItem.bind（this）；
this.editItem=this.editItem.bind（this）；
}
增补（e）{
var itemArray=this.state.items；
if（this.inputElement.value！=''）{
itemArray.unshift({
text:this.inputElement.value，
关键字：Date.now（）
})
这是我的国家({
项目：itemArray
})
this.inputElement.value=''；
}
e、 预防默认值（）；
}
删除项（键）{
var filteredItems=this.state.items.filter（函数（项）{
返回（item.key！==key）；
});
这是我的国家({
项目：filteredItems
});
}
编辑项（键）{
}
render（）{
返回(
this.inputElement=a}占位符=“输入任务”>
添加
);
}
}
将默认值导出到列表；

TodoItems.js：

import React, { Component } from "react";
class TodoItems extends Component {
  constructor(props, context) {
    super(props, context);

    this.createTasks = this.createTasks.bind(this);

  }
  edit(key){
    this.props.edit(key);
  }
  delete(key){
    this.props.delete(key);
  }
  createTasks(item) {
    return <li key={item.key}>{item.text}<a href="" className="button bg_green" onClick={()=>this.edit(item.key)}>Edit</a><a href=""className="button bg_red" onClick={()=>this.delete(item.key)}>Delete</a></li>
  }

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

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


export default TodoItems;

import React，{Component}来自“React”；
类TodoItems扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
this.createTasks=this.createTasks.bind（this）；
}
编辑（键）{
此.props.edit（键）；
}
删除（键）{
此.props.delete（键）；
}
createTasks（项目）{
return
{item.text}
}
render（）{
var todoEntries=this.props.entries；
var listItems=todoEntries.map（this.createTasks）；
返回(

{listItems}

);
}
};
将默认值导出到doitems；

我的问题是，当我试图从列表中删除任何项目时，所有项目都将被删除。这里我还需要实现
编辑和更新
功能，这意味着一旦用户单击编辑按钮，相应的值将显示在文本框中，用户将在单击添加按钮后更改并保存
 问题是：

href=""

使用
href=“#”
或
href=“javascript:void（0）”
，或从
标记中删除
href
。它会正常工作

（仅将
href=“”
更改为
href=“#”
）
您的删除按钮位于带有href的锚定标记内，因此它会导致您的页面导航，从而重新加载页面，使您相信所有内容都已被删除，但实际上页面正在重新加载。
只需删除href标签就可以解决您的问题，不过您需要应用一些css来给它一种链接的感觉

用下面的函数替换createTasks函数以解决删除问题

  createTasks(item) {
return (
  <li key={item.key}>
    {item.text}
    <a
      className="button bg_green"
      onClick={() => this.edit(item.key)}
    >
      Edit
    </a>
    <a
      className="button bg_red"
      onClick={() => this.delete(item.key)}
    >
      Delete
    </a>
  </li>
);}

createTasks（项目）{
返回(

{item.text}
this.edit（item.key）}
>
编辑
this.delete（item.key）}
>
删除

);}
首先检查过滤器返回给您的内容，认为它返回的是空数组，但我需要实现编辑更新功能。我可以从您那里得到任何帮助吗？当然，如果您遇到任何问题，请尝试实现让我知道：）好的，让我尝试让您知道吗？我喜欢这样
editItem（key）{this.state.items.map（function（item）{if（item.key==key）{this.inputElement.value=item.text；}
若要单击“编辑”按钮，但获取此
类型错误：无法读取未定义的属性“inputElement”
错误。忘记绑定映射回调方法，请使用以下命令：
editItem（key）{this.state.items.map（item=>{if（item.key==key）{this.inputElement.value=item.text；}
此处也不需要地图使用
forEach
（只需将地图替换为forEach）