javascript - 在 react 中从待办事项列表中删除项目

Question

我一直在尝试学习 react ，但遇到了障碍。在理解与遇到的问题相关的子组件之间传递 Prop 时遇到问题。我在从我的待办事项列表中删除一个项目时遇到问题，并且可以终身我发现 wat 错了。

import React, { Component } from 'react';
import Form from './components/Form';
import Todo from './components/Todo';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      userInput: "",
      todoList: [] 
    }
    this.onChange= this.onChange.bind(this);
    this.addItem=this.addItem.bind(this);
    this.handleDelete=this.handleDelete(this);
  }
  //update input state
  onChange=(e)=>{
        this.setState({
      userInput: e.target.value
    })
  }
  //update todo list
  addItem=(e)=>{
    e.preventDefault();
    if(this.state.userInput!==""){
      const userData={
        //create a specific user id for each input
        id: Math.random(),
        value: this.state.userInput

      }
      const list=[...this.state.todoList];
    list.push(userData);
    
    //Reset userInput after inputing data
    this.setState({
      userInput: "",
      todoList: list
    
    })
    }
    

    
  }
  //Deleting an item
  
  handleDelete=(id)=>{
    const list=[...this.state.todoList];
    const updatedList=list.filter(item=>item.id!==id)
    this.setState({
      todoList:updatedList
    })
  }

  
 
  
  
  
  render() {
    
    return(
      <div>
        <h1>
          My Todo List
        </h1>
        <Form value={this.state.userInput} onChange={this.onChange} onSubmit={this.addItem} />
        <Todo list={this.state.todoList} onDelete={this.handleDelete}/>
      </div>
      
    ) 
      
  }
}
 
export default App;

上面是父组件

import React, { Component } from 'react';

class Form extends Component {
    
    render() { 
        return (
            <div>
                <form >
                    <input type="text" value={this.props.value} onChange={this.props.onChange}/><button className="btn btn-primary" type="submit" onClick={this.props.onSubmit}>add</button>
                </form>
       
            </div>
           
          );
    }
}
 
export default Form;

import React, { Component } from 'react';


class Todo extends Component {
     
    render() { 
        const todos=this.props.list.map((item,index)=><li key={item.id}>{item.value} <i onClick={this.props.onDelete(item.id)} class="fas fa-trash"></i></li>)

        return ( 
            <div>
              <ul>
              {todos}    
            </ul>  
            </div>
         );
    }
}
 
export default Todo;

Answer 1

你几乎做对了。您需要为 onClick 处理程序提供回调。
您现在拥有它的方式是为 onClick 处理程序提供运行该函数的结果。换句话说onDelete每次渲染时都会调用 onClick返回值为onDelete (这是未定义的)。
你想给它功能本身。只需将其更改为:

onClick={() => this.props.onDelete(item.id)}

编辑:您在绑定(bind) this.handleDelete 时也犯了一个错误.它应该是:

this.handleDelete = this.handleDelete.bind(this);

但你做到了:

this.handleDelete = this.handleDelete(this);

这就是您收到错误的原因。