Question

因此，我使此应用程序超级简单，但是无法使handleRemove正常工作。 filterTodos列出了所有相同的待办事项。这是我的代码。我什至尝试过在线查看其他解决方案，但由于某种原因，handleRemove中的此过滤器功能不会过滤掉状态以外的任何内容。

import React, { Component } from 'react';

class Main extends Component {
  constructor(props){
    super(props);
    this.state = {
      todos: [],
      inputValue: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRemove = this.handleRemove.bind(this);
  }

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

  handleSubmit = (e) => {
    e.preventDefault();
    const newTodo = this.state.inputValue;

    if (this.state.inputValue === ''){
      alert('Please Enter a Todo!');
    } else {
        this.setState((prevState) => ({
          todos: [...prevState.todos,
            {
              message: newTodo,
              id: this.state.todos.length
            }
          ]
        }));
        this.setState({inputValue:''});
    }
  }

  handleRemove (id) {
    const filteredTodos = this.state.todos.filter(todo => todo.id !== id);
      this.setState({
        todos: filteredTodos
      });

      console.log(filteredTodos);
    }

  render(){
    const mappedTodos = this.state.todos.map((item, i) => 
      <div key={i} id={this.state.todos[i].id}>
        {item.message} <button type='submit' onClick={this.handleRemove}>X</button>
      </div>
    )

    return(
      <div className='main-page'>
        <div className='input'>
          <input type='text' placeholder='Enter Your Todo' value={this.state.inputValue} onChange={this.handleChange} />
          <button type='submit' onClick={this.handleSubmit}>Add</button>
        </div>

        <div className='todos'>
          {mappedTodos}
        </div>

      </div>
     )
    }
   }
   export default Main;

Answer 1

您的handleRemove函数需要一个ID，您可以通过方括号中的值看到它

handleRemove (id)

要解决此问题，您只需要像这样传递参数即可：

const mappedTodos = this.state.todos.map((item, i) => 
      <div key={i} id={this.state.todos[i].id}>
        {item.message} <button type='submit' onClick={this.handleRemove(this.state.todos[i].id)}>X</button>
      </div>
    )

带有对象数组的Todo List应用的handleRemove函数

1 个答案: