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

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