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

Question

我是 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;

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;

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

Answer 1

问题是这样的:

href=""

使用 href="#" 或 href="javascript:void(0)"，或者从 中删除 href >a 标签。它将正常工作。

<强> Working fiddle. (仅将 href="" 更改为 href="#")