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

【问题标题】：Call a method from parent component via props, when clicking on a button单击按钮时，通过道具从父组件调用方法
【发布时间】：2019-02-09 19:28:23
【问题描述】：

我被困住了，因为我遇到的问题有很多多种解决方案，但对于像我这样的初学者没有明确的解释。

我正在构建我的第一个待办事项列表应用。我有一个 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");
  }
[...]

【问题讨论】：

确保您将 deleteTodo 作为道具发送到 Todo 组件，例如

标签： reactjs parent-child react-props

【解决方案1】：

您需要将 deleteTodo 传递给 ToDo 组件

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

【讨论】：

【解决方案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)}/>

【讨论】：

【解决方案3】：

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

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

【讨论】：