Question

由于许多解决问题的方法而陷入困境，但对于像我这样的初学者却没有明确的解释。

我正在构建我的第一个待办事项列表应用程序。我有一个App文件和一个ToDo子组件。

在子Todo中，我正在使用props调用父应用程序组件中包含的deleteTodo方法，但单击按钮时控制台不会显示任何结果。

我想念什么？

ToDo.js （完整代码）

import React, { Component } from 'react';

class ToDo extends Component { //define a class that extends Component
   render() {
   return (
       <li>
          <span>{ this.props.description }</span>
          <button onClick ={this.props.deleteTodo}>Delete</button>
       </li>
   );
 }
}
export default ToDo; //the component is made to export the data

App.js （有关完整代码：https://jsfiddle.net/apjc6gk4/）

[...]

deleteTodo() {
    console.log("to do deleted");
  }
[...]

Answer 1

您需要将deleteTodo传递给ToDo组件

<ToDo key={ index }          
      deleteTodo={this.deleteTodo.bind(this)}
      description={ todo.description }
      isCompleted={ todo.isCompleted }
      toggleComplete={ () => this.toggleComplete(index)}
      isDeleted={todo.isDeleted}/>

Answer 2

您没有将deleteTodo方法作为Todo组件的支持

<ToDo key={ index } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ () => this.toggleComplete(index)} isDeleted = {todo.isDeleted}/>

将此方法作为prop传递给Todo组件，然后调用它

<ToDo key={ index } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ () => this.toggleComplete(index)} isDeleted = {todo.isDeleted} deleteTodo={this.deleteTodo.bind(this)}/>

Answer 3

就我而言，执行以下步骤可帮助您与您的情况相同。希望对您有所帮助。

在父组件中定义函数以从子组件接收道具。
在父组件中，通过prop将函数名称传递给子组件。
在子组件中，单击按钮时调用props函数。
您可以在子组件的父组件中看到结果。

单击按钮时，通过道具从父组件调用方法

3 个答案: