从React中调用孙子功能组件的祖父母方法

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;

IM试图使用的方法是todoeTem组件中的应用程序组件

中的handlechangestatus((

谢谢大家的帮助

Answer 1

此行是错误的：

this.handleChangeStatus = this.handleChangeStatus(this);
//Change to this and it works
this.handleChangeStatus = this.handleChangeStatus.bind(this);