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

Question

I am new to React.js and I need to implement the delete and update functionality. Here I have done some coding but in case of delete one element, its deleting all from the array list.

Here is my code:

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;

My problem is when I am trying to delete any item from the list, All items are removing. Here Also I need to implement the edit and update functionality means once user will click on edit button the respective value will display on the text box and user will change it and save after click on Add button.

Answer 1

Issue is this:

href=""

Either use href="#" or href="javascript:void(0)" , or remove the href from a tag. It will work properly.

Working fiddle. (changed only href="" to href="#" )

Answer 2

Your delete button is inside a anchor tag which has a href, so it is causing your page to navigate and hence reloading the page making you believe everything is getting deleted but in reality the page is reloading. Simply removing the href tag will solve your issue you need to however apply some css to give it a link feel.

Replace your createTasks function with the one below to solve your delete problem.

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