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）传递给一个＆＃39;外部＆＃39; component - TaskDisplayed.js;或者我如何跟踪用户点击列出项目的时间？请原谅我这种不专业的询问方式！但是，我真的需要与ReactJS保持同步！谢谢！

P.S。上面的代码我在网上找到了，所以谢谢你：D！

Answer 1

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

请参阅How to pass an event handler to a child component in React

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

将方法儿童的组件传递给另一个组件＆＃39;外部＆＃39; ReactJS中的组件

1 个答案: