javascript - 我在我的 React todo 应用程序中创建正常运行的 "delete button"时遇到问题

Question

我是 Reactjs 的新手，我正在开发我的第一个应用程序，当然是一个待办事项应用程序。然而，一切都很顺利，直到我被要求创建一个删除按钮来删除我的待办事项。我被困住了，对此困惑了近三天。任何帮助或建议将不胜感激。

react-to-do/src/App.js

import React, { Component } from "react";
import "./App.css";
import ToDo from "./components/ToDo.js";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        { description: "Walk the cat", isCompleted: true },
        { description: "Throw the dishes away", isCompleted: false },
        { description: "Buy new dishes", isCompleted: false }
      ],
      newTodoDescription: ""
    };
    this.deleteTodo = this.deleteTodo.bind(this);
  }

  deleteTodo(description) {
    this.setState({
      todos: this.state.todos.filter(
        (todos, index) => todos.description !== description
      )
    });
  }

  handleChange(e) {
    this.setState({ newTodoDescription: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.newTodoDescription) {
      return;
    }
    const newTodo = {
      description: this.state.newTodoDescription,
      isCompleted: false
    };
    this.setState({
      todos: [...this.state.todos, newTodo],
      newTodoDescription: ""
    });
  }

  toggleComplete(index) {
    const todos = this.state.todos.slice();
    const todo = todos[index];
    todo.isCompleted = todo.isCompleted ? false : true;
    this.setState({ todos: todos });
  }

  render() {
    return (
      <div className="App">
        <ul>
          {this.state.todos.map((todo, index) => (
            <ToDo
              key={index}
              description={todo.description}
              isCompleted={todo.isCompleted}
              toggleComplete={() => this.toggleComplete(index)}
            />
          ))}
        </ul>
        <form onSubmit={e => this.handleSubmit(e)}>
          <input
            type="text"
            value={this.state.newTodoDescription}
            onChange={e => this.handleChange(e)}
          />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

export default App;

react-to-do/src/ToDo.js

import React, { Component } from "react";

class ToDo extends Component {
  deleteToDo(description) {
    this.props.deleteToDo(description);
  }

  render() {
    return (
      <div className="wrapper">
        <button
          className="deleteToDo"
          onClick={e => this.deleteToDo(this.props.description)}
        >
          Delete
        </button>
        {this.props.deleteToDo}

        <li>
          <input
            type="checkbox"
            checked={this.props.isCompleted}
            onChange={this.props.toggleComplete}
          />
          <span>{this.props.description}</span>
        </li>
      </div>
    );
  }
}

export default ToDo;

react-to-do/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";

ReactDOM.render(<App />, document.getElementById("root"));
registerServiceWorker();

Answer 1

您的代码应如下所示

class ToDo extends React.Component {
        deleteToDo(description) {
          this.props.deleteToDo(description);
        }
          render() {
            return (
              <div className="wrapper">

              <button className="deleteToDo" onClick = {(e) => 
                  this.deleteToDo(this.props.description)}>Delete</button> 
                  {() => this.props.deleteToDo(this.props.description)}

              <li>
                <input type="checkbox" checked={ this.props.isCompleted } 
        onChange={ this.props.toggleComplete } />
                <span>{ this.props.description }</span>
              </li>
              </div>
            );
          }
        }

    class App extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              todos: [
          { description: 'Walk the cat', isCompleted: true },
          { description: 'Throw the dishes away', isCompleted: false },
          { description: 'Buy new dishes', isCompleted: false }
              ],
              newTodoDescription: ''
            };
              this.deleteTodo = this.deleteTodo.bind(this);
          }
          deleteTodo(description) {
          const filteredTodos = this.state.todos.filter((todo, index) =>  todo.description !== description);
            this.setState({
              todos: filteredTodos
            });
          }

          handleChange(e) {
            this.setState({ newTodoDescription: e.target.value })
          }

          handleSubmit(e) {
            e.preventDefault();
            if (!this.state.newTodoDescription) { return }
            const newTodo = { description: this.state.newTodoDescription, 
        isCompleted: false};
            this.setState({ todos: [...this.state.todos, newTodo], 
        newTodoDescription: '' });
          }
          toggleComplete(index) {
            const todos = this.state.todos.slice();
            const todo = todos[index];
            todo.isCompleted = todo.isCompleted ? false: true;
            this.setState({ todos: todos });
          }

          render() {
            return (
              <div className="App">
                <ul>
                  { this.state.todos.map( (todo, index) =>
                    <ToDo key={ index } description={ todo.description } 
                        isCompleted={ todo.isCompleted } toggleComplete={ () => 
                        this.toggleComplete(index) } deleteToDo={this.deleteTodo} />
                  )}
                </ul>
                <form onSubmit={ (e) => this.handleSubmit(e) }>
                  <input type="text" value={ 
                    this.state.newTodoDescription } onChange={ (e) => 
                    this.handleChange(e) } />
                  <input type="submit" />
                </form>
              </div>
            );
          }
        }

在这里，您忘记从 App 传递 props 和从 ToDo 组件传递 description 参数。

在这里试试 https://jsfiddle.net/prakashk/69z2wepo/101369/#&togetherjs=B3l5GDzo8A