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;

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

Answer 1

问题是：

href=""

使用href="#"或href="javascript:void(0)"，或从href标记中移除a。它会正常工作。

Working fiddle. （仅将href=""更改为href="#"）

Answer 2

您的删除按钮位于具有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>
);}

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

2 个答案: