反应：无法访问作为道具传递给子组件的父组件的功能答案

【问题标题】：React: Unable to access the parent component's function which is passed as prop to child component反应：无法访问作为道具传递给子组件的父组件的功能
【发布时间】：2016-06-02 17:06:36
【问题描述】：

我有一个 TodoList 组件，它是 App 组件的子组件。我希望更改 App 组件的待办事项列表的状态。我正在尝试将一个 toggleComplete 函数从 TodoList 组件传递给 Todo 组件，因此在 onClick 事件中它会触发并一直运行到 App 组件，以便我可以更新状态。

我在 TodoList.js 中收到“Uncaught TypeError: Cannot read property 'toggleComplete' of undefined”

~/src/component/Todo.js

import React, {PropTypes} from 'react';

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

  render() {
    return (
      <li className={this.props.todo.done ? 'completed' : 'view'}>
        <div className="view">
          <input onClick={this.props.toggleComplete(this.props.id)} className="toggle" type="checkbox" checked={this.props.todo.done} />
          <label>{this.props.id}: {this.props.todo.title}</label>
          <button className="destroy"></button>
        </div>
      </li>
    );
  }
}

~/src/component/TodoList.js

import React, {PropTypes} from 'react';
import Todo from './Todo'

export default class TodoList extends React.Component {
  constructor(props) {
    super(props);
  }
  toggleComplete(todoID){
    console.log('hit toggleComplete TodoList');
  }

  render() {
    return (
      <section className="main">
        <ul className="todo-list">
          {this.props.todos.map(function(todo, index){
            return <Todo todo={todo} toggleComplete={this.toggleComplete} id={index + 1} key={index+1}/>;
          })}
        </ul>
      </section>
    );
  }
}

~/src/App.js

import React, { Component } from 'react';
import Header from './component/Header'
import TodoList from './component/TodoList'
import TodoFooter from './component/TodoFooter'
import Footer from './component/Footer'

export default class App extends Component {
  constructor(){
    super();
    this.state = {
      todos: [
        {title: 'Taste JavaScript', done: true},
        {title: 'Buy Unicorn', done: false},
        {title: 'eat all day', done: false},
        {title: 'sleep all night', done: true}
      ]
    }
  }

  render() {
    return (
      <div>
        <section className="todoapp">
          <Header />
          <TodoList todos={this.state.todos} />
          <TodoFooter />
        </section>
        <Footer />
      </div>
    );
  }
}

【问题讨论】：

标签： reactjs

【解决方案1】：

您的问题似乎发生在函数进入您的子组件之前，因为错误来自您的父组件。您的 map function 无法访问正确的 this，因此它被视为未定义 - 请尝试以下操作：

{this.props.todos.map(function(todo, index){
  return <Todo todo={todo} toggleComplete={this.toggleComplete} id={index + 1} key={index+1}/>;
}, this)} // use the optional "this" argument to the map function

这里有一个简单的例子，展示了一个简单的例子，父母用对父母范围的相同引用来渲染他们的许多孩子：https://jsfiddle.net/v5wd6Lrg/1/

【讨论】：

将地图的“this”参数与将道具绑定到“this”相结合就可以了。谢谢:)

【解决方案2】：

上面的答案也可以不用绑定的箭头函数来完成

{this.props.todos.map((todo, index) => {
  return <Todo todo={todo} toggleComplete={this.toggleComplete} id={index + 1} key={index+1}/>;
});

【讨论】：