Question

我创建了一个简单的待办事项列表，添加了项目，但是当我单击“删除”按钮时，我的项目并未从列表中删除任何项目。我想知道我在代码中犯了什么错误，将不胜感激。提前致谢！当然，我尝试通过Google和Youtube查找，但只是找不到我想要的答案。

链接：https://codesandbox.io/embed/simple-todolist-react-2019oct-edbjf

App.js:

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import TodoForm from "./TodoForm";
import Title from "./Title";

class App extends React.Component {
 // myRef = React.createRef();

  render() {
    return (
      <div className="App">
        <Title />
        <TodoForm />


      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


----------------------
TodoForm.js:

import React from "react";
import ListItems from "./ListItems";

class TodoForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      items: [],
      id: 0
    };
  }

  inputValue = e => {
    this.setState({ value: e.target.value });
  };

  onSubmit = e => {
    e.preventDefault();
    this.setState({
      value: "",
      id: 0,
      items: [...this.state.items, this.state.value]
    });
  };

  deleteItem = (itemTobeDeleted, index) => {
    console.log("itemTobeDeleted:", itemTobeDeleted);
    const filteredItem = this.state.items.filter(item => {
      return item !== itemTobeDeleted;
    });
    this.setState({
      items: filteredItem
    });
  };

  // remove = () => {
  //   console.log("removed me");
  // };

  render() {
    // console.log(this.deleteItem);
    console.log(this.state.items);
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input
            type="text"
            placeholder="Enter task"
            value={this.state.value}
            onChange={this.inputValue}
          />

          <button>Add Item</button>
        </form>

        <ListItems items={this.state.items} delete={() => this.deleteItem} />
      </div>
    );
  }
}

export default TodoForm;


----------------------
ListItems.js

import React from "react";

const ListItems = props => (
  <div>
    <ul>
      {props.items.map((item, index) => {
        return (
          <li key={index}>
            {" "}
            {item}
            <button onClick={props.delete(item)}>Delete</button>
          </li>
        );
      })}
    </ul>
  </div>
);

export default ListItems;

Answer 1

问题是，您必须将一个函数传递给onDelete，但您是直接调用该函数

像这样更新删除项，

deleteItem = (itemTobeDeleted, index) => (event) => {

并更新此行，（因为itemTobeDeleted没有回到该方法）

 <ListItems items={this.state.items} delete={(item) => this.deleteItem(item)} />

解决了问题

工作沙箱：https://codesandbox.io/s/simple-todolist-react-2019oct-zt5w6

Answer 2

这是工作示例：https://codesandbox.io/s/simple-todolist-react-2019oct-xv3b5

您必须将函数传递到ListItems中，并在ListItems中运行该函数，并传递正确的参数（项目）。

Answer 3

您的解决方案已接近尾声；要使您的应用按预期运行，需要修复两个问题。

首先，在渲染ListItems组件时，请确保将item传递给您的deleteItem()函数：

<ListItems items={this.state.items} delete={(item) => this.deleteItem(item)} />

接下来，您的ListItems组件需要更新，以便在用户调用delete之后（而不是在渲染该组件时立即）调用onclick回调道具。。可以通过以下操作解决此问题：

{ props.items.map((item, index) => { 
    return (<li key={index}>{item}
      {/* 
        onClick is specified via inline callback arrow function, and 
        current item is passed to the delete callback prop 
      */}
        <button onClick={() => props.delete(item)}>Delete</button>
      </li>);
    )}

这是您的code sandbox

的有效版本

Answer 4

首先使删除函数传递给它一个 ind 参数，然后在保存添加值的数组上使用过滤方法

{
  "title": "Clean room",
  "completed": false,
  "createdAt": 1615544252770,
  "description": "Test"
}

通过执行此操作，没有您尝试删除的键的元素将不会被返回，而其他元素将被返回。

无法从React中的待办事项列表中删除项目

4 个答案: