ReactJS内の別の「外部」コンポーネントにメソッドの子コンポーネントを渡す

Question

ReactJsをコーディングしています。これは初めての投稿です！だから、私はReactJsでTodoアプリケーションを構築しようとしています。私は4つのコンポーネントを持っています。

最初のコンポーネント。 App.jsは - 親1

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の子要素）から '外部'コンポーネント - TaskDisplayed.js;またはユーザーがリストされたアイテムをクリックしたときにどのように追跡することができますか？この尋ねないプロフェッショナルな方法のために私を許してください！しかし、私は本当にReactJSで軌道に乗る必要があります！ありがとう！

P.S.上記のコードは私がオンラインで見つけたので、D：ありがとう！

Answer 1

親コンポーネントでonClickイベントハンドラを定義し、その子コンポーネントに小道具として渡す必要があります。

はこの場合How to pass an event handler to a child component in React

を参照してください、あなたはそれが通信する必要のある2つのコンポーネントの親であるため、アプリケーション・コンポーネントでそれを定義したいと思います。