带参数ReactJS的回调函数

Question

使用ReactJS并且无法理解如何callback functions使用ReactJS.

我有一个标题为父组件TodoFormComponent,它初始化我的待办事项列表.我已经创建了一个回调函数TodoItemsComonent,但它不会触发该updateItem方法并显示该项selected.

问题:如何将数据从孩子传递给父母？我想将选定的待办事项传递给父项,以便我可以更新主待办事项列表.

---

父组件(TodoFormComponent)

---

的TodoFormComponent具有selectedTask,应触发updateItem方法.

import * as React from "react";
import TodoItemsComponent from "../todo-items/todo-items.component";
import AddTodoItemComponent from "../add-todo-item/add-todo-item.component";

export default class TodoFormComponent extends React.Component {
    constructor(){
        super();
        this.state = {
            todoItems: [
                { id: '1', todo: 'First Todo Item' },
                { id: '2', todo: 'Second Todo Item' },
                { id: '3', todo: 'Third Todo Item' }
            ],
            selected: {}
        };

        this.updateItem = this.updateItem.bind(this);
    }

    updateItem () {
        console.log('Selected Value:: ', this.state.selected);
    }

    render() {
        return (
            <div className="row">
                <div className="container">
                    <div className="well col-xs-6 col-xs-offset-3">
                        <h1>To do: </h1>
                        <div name="todo-items">
                            <TodoItemsComponent items={this.state.todoItems} selectedTask={() => {this.updateItem}}/>
                        </div>
                        <div name="add-todo-item">
                            <AddTodoItemComponent/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

---

子组件(TodoItemsComponent)

---

的TodoItemsComponent具有onClick以更新所选的值.这在selectedTask功能中得到更新.import*as React from"react";

export default class TodoItemsComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    selectedTask (item) {
        this.setState({selected: item})
    }

    render() {
        return (
            <ul className="list-group">
                {
                    this.props.items.map((item) => {
                        return (
                            <li className="list-group-item">
                                {item.todo}
                                <div className="pull-right">
                                    <button
                                        type="button"
                                        className="btn btn-xs btn-success">
                                        &#x2713;
                                    </button> <button
                                        type="button"
                                        className="btn btn-xs btn-danger"
                                        onClick={() => {this.selectedTask(item)}}
                                        >&#xff38;
                                    </button>
                                </div>
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}

Answer 1

每当您想要将数据从子节点传递给父节点时,您将一个函数作为prop传递给子节点,并从子节点传递该函数 this.props.passedFunction(yourDataToPassToParent)

在您的父组件中,您将selectedTask函数作为prop 传递,因此您应该调用this.prop.selectedTask()要传递给父类的数据,如:

<button
  type="button"
  className="btn btn-xs btn-danger"
  onClick={() => {this.props.selectedTask(item)}}
 >
  &#xff38;
 </button>

你传递selectedTask父母的方式也是错误的.你应该像这样传递它:

<TodoItemsComponent items={this.state.todoItems} selectedTask={this.updateItem}/>