Вызов метода из родительского компонента через реквизит при нажатии на кнопку

Question

Я застрял из-за множества решений проблемы, которые у меня есть, но нет ясного объяснения новичку, как я.

Я создаю свое первое приложение для списка задач.У меня есть файл приложения и дочерний компонент ToDo.

Из дочернего Todo я вызываю метод deleteTodo, включенный в родительский компонент приложения, используя props, но консоль не отображает никакихрезультат, когда я нажимаю на кнопку.

Чего мне не хватает?

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 } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ () => this.toggleComplete(index)} isDeleted = {todo.isDeleted}/>

Передайте этот метод как реквизит для компонента Todo, а затем вызовите его

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

Answer 2

В моем случае, следующие шаги помогут мне так же, как ваш случай.Я надеюсь помочь вам с моими шагами.

1. Определить функцию в родительском компоненте для получения реквизитов от дочернего компонента.
2. В родительском компоненте передать имя функции дочернему компоненту через реквизиты.
3. В дочернем компоненте вызывайте функцию реквизита при нажатии кнопки.
4. Вы можете увидеть результат в родительском компоненте от дочернего.

Answer 3

Вам нужно передать deleteTodo компоненту ToDo

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