将方法子组件传递给 ReactJS 中的另一个"外部"组件

Question

我是ReactJs的新手，编码，这是我第一次在这里发帖！所以，我正在尝试在ReactJs中构建一个Todo应用程序。我有四个组成部分。

第一个组合是 App.js - 父组合

import React, { Component } from 'react';
import TaskTodo from './TaskTodo';
import './App.css';
import TaskDisplayed from "./TaskDisplayed";
class App extends Component {
render() {
    return (
        <div className="App">
            <header className="App-header">
                <h1 className="App-title">Hey, i'm the header! </h1>
            </header>
            <div className="App-intro">
                <TaskTodo/>
            </div>
            <div className="App-right">
                <TaskDisplayed/>
            </div>
        </div>
       );
    }
 }
export default App;

---

TaskTodo.js - 它是TodoItems的父级.js

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

export default class TaskTodo extends Component{
constructor(props) {
    super(props);
    this.state = {
        items: []
    };
    this.addItem = this.addItem.bind(this);
};

addItem(e) {
    const itemArray = this.state.items;
    if (this._inputElement.value !== "") {
        itemArray.unshift(
            {
                text: this._inputElement.value,
                key: Date.now()
            }
        );
        this.setState({
            items: itemArray
        });
        this._inputElement.value = "";
    }
    e.preventDefault();
}
render() {
    return (
        <div className="todoListMain">
            <div className="header">
                <form onSubmit={this.addItem}>
                    <input type="text" ref={(a) => this._inputElement = a}
                           placeholder="Add a list">
                    </input>
                </form>
            </div>
            <TodoItems entries={this.state.items}/>
        </div>
     );
  }
}

---

TodoItems.js - TaskTodo 的子项.js

import React, { Component } from 'react';

class TodoItems extends Component {
constructor(props) {
    super(props);
    this.createTasks = this.createTasks.bind(this);
}
handleClick = (text) => {
    console.log(text);
}
createTasks(item) {
    return <li key={item.key}><a onClick={() => this.handleClick(item.key, item.text)} href={'#about'}>#{item.text}</a></li>
}
render() {
    const todoEntries = this.props.entries;
    const listItems = todoEntries.map(this.createTasks);
    return (
        <ul className="theList">
            {listItems}
        </ul>
     );
  }
};
 export default TodoItems;

我需要做的是如何将handleClick方法（TaskTodo的子项）传递给"外部"组件 - TaskDisplay.js;或者如何跟踪用户何时单击列出的项目？请原谅我这种不专业的提问方式！但是，我真的需要跟上ReactJS的轨道！谢谢！

附言上面的代码是我在网上找到的，所以谢谢你的:D！

Answer 1

您应该在父组件中定义 onClick 事件处理程序，并将其作为 prop 传递给子组件。

请参阅如何在 React 中将事件处理程序传递给子组件

在这种情况下，您可能希望在 App 组件中定义它，因为它是需要通信的两个组件的父级。