从孙子功能组件中调用祖父母方法做出反应

Question

我试图从我孩子组件中的祖父母组件中调用一个简单的方法，但由于某些原因我不能，我尝试了所有可能的方法，但我想我错过了一些东西 这是完整的代码：

import React, { Component } from 'react';
import './App.css';

var todos = [
  {
    title: "Example2",
    completed: true
  }
]
const TodoItem = (props) => {
  return (
    <li 
    className={props.completed ? "completed" : "uncompleted"}
    key={props.index} onClick={props.handleChangeStatus}
    >
    
    {props.title}
    </li>
  );
}
class TodoList extends Component {
  constructor(props) {
    super(props);
    

  }
  render () {
    return (
    <ul>
      {this.props.todosItems.map((item , index) => (
        <TodoItem  key={index} {...item} {...this.props} handleChangeStatus={this.props.handleChangeStatus}  />
      ))}
    </ul>
  );
  }
  
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos ,
      text :""
    }
    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChangeStatus = this.handleChangeStatus(this);

  }
  handleTextChange(e) {
    this.setState({
      text: e.target.value
    });
  }
  handleChangeStatus(){
    console.log("hello");
  }
  handleSubmit(e) {
    e.preventDefault();
    const newItem = {
      title : this.state.text , 
      completed : false
    }
    this.setState((prevState) => ({
      todos : prevState.todos.concat(newItem),
      text : ""
    }))
  }
  render() {
    
    return (
      <div className="App">
        <h1>Todos </h1>
        <div>
          <form onSubmit={this.handleSubmit}>
            < input type="text" onChange={this.handleTextChange} value={this.state.text}/>
          </form>
          
        </div>
        <div>
          <TodoList handleChangeStatus={this.handleChangeStatus} todosItems={this.state.todos} />
        </div>
        <button type="button">asdsadas</button>
      </div>
    );
  }
}

export default App;

我试图使用的方法是来自TodoItem组件中的App组件的handleChangeStatus（）

谢谢大家的帮助

Answer 1

这一行错了：

this.handleChangeStatus = this.handleChangeStatus(this);

//Change to this and it works

this.handleChangeStatus = this.handleChangeStatus.bind(this);