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

Question

我有一个TodoList组件，它是App组件的子组件。我希望更改App组件的待办事项列表的状态。我试图从TodoList组件传递toggleComplete功能到Todo组件，所以在onClick事件中，它会触发并工作到App组件，以便更新状态。

我得到一个 “遗漏的类型错误：无法读取属性未定义 'toggleComplete'” 在TodoList.js

〜/ src目录/组件/ 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目录/组件/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> 
    ); 
    } 
} 

Answer 1

您的问题似乎发生在函数发送给您的子组件之前，因为错误来自您的父组件。您map function没有访问到正确的这一点，所以它被视为不确定的 - 试试这个：

{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/