Javascript 从react中的待办事项列表中删除项目

我一直在尝试学习如何应对，但遇到了一个障碍。我不理解如何在子组件之间传递与遇到的问题相关的道具。我在从待办事项列表中删除一项时遇到了问题，我可以终生找出问题所在

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}来自'React'；
从“./components/Form”导入表单；
从“./components/Todo”导入Todo；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户输入：“”，
托多利斯特：[]
}
this.onChange=this.onChange.bind（this）；
this.addItem=this.addItem.bind（this）；
this.handleDelete=this.handleDelete（this）；
}
//更新输入状态
onChange=（e）=>{
这是我的国家({
用户输入：e.target.value
})
}
//更新待办事项列表
附加项=（e）=>{
e、 预防默认值（）；
if（this.state.userInput！==“”）{
常量用户数据={
//为每个输入创建特定的用户id
id:Math.random（），
值：this.state.userInput
}
const list=[…this.state.todoList]；
list.push（用户数据）；
//输入数据后重置用户输入
这是我的国家({
用户输入：“”，
todoList:列表
})
}
}
//删除项目
handleDelete=（id）=>{
const list=[…this.state.todoList]；
const updatedList=list.filter（item=>item.id！==id）
这是我的国家({
todoList:updatedList
})
}
render（）{
返回(
我的待办事项清单
) 
}
}
导出默认应用程序；

上面是父组件

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}来自'React'；
类形式扩展组件{
render（）{
返回(
添加
);
}
}
导出默认表单；

import React，{Component}来自'React'；
类Todo扩展组件{
render（）{
const todos=this.props.list.map（（项，索引）=>
{item.value}
）
报税表（

{todos}

);
}
}
导出默认Todo；

您几乎做对了。您需要向onClick处理程序提供回调

现在的方式是向onClick处理程序提供运行该函数的结果。换句话说，

onDelete

在每次渲染时被调用，

onClick

被赋予

onDelete

的返回值（未定义）

您想赋予它函数本身。只需将其更改为：

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

---

编辑：您在绑定this.handleDelete时也犯了一个错误。它应该是：

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

但你做到了：

this.handleDelete = this.handleDelete(this);

---

这就是您出错的原因。

显然，您的

Todo

组件没有正确提供单击处理程序：

应该是：

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

this.props.onDelete（item.id）}class=“fas fa trash”>

---

原因是

onClick

需要一个函数并以这种方式传递它

onClick={this.props.onDelete（item.id）}

提供了返回

onDelete

函数的功能。

除了您提供的关于您的问题的代码外，在codesandbox上提供一个运行的代码是一个非常好的帮助我们的方法。具体会发生什么？将您的onClick处理程序更改为

onClick={（）=>this.props.onDelete（item.id）}

，但它仍然返回此错误：“this.props.onDelete”不是一个函数