React.js-传递的函数“不是函数"错误 [英] React.js - Passed function "not a function" Error

问题描述

我试图将道具从子组件传递到父组件，但是由于某种原因，在单击渲染后，在js控制台中出现错误"TypeError:this.props.onClick is a function"子组件.

I am trying to pass props from a child component to a parent component, but for some reason I'm getting the error "TypeError: this.props.onClick is not a function" in the js console after clicking on the rendered child components.

基本上，我想做的是管理一个类别列表，其中一个类别子组件具有"selected"属性为true，并在每次单击类别li时正确更新.

Basically what I am trying to do is manage a list of categories in which one category subcomponent has the 'selected' prop as true, and updates correctly every time you click on a category li.

这是一个具有以下代码的jsfiddle: http://jsfiddle.net/kb3gN/8023/

Here is a jsfiddle with the code: http://jsfiddle.net/kb3gN/8023/

我真的还不太了解如何有效使用React.js的概念，因此可以提供任何帮助！

I don't really feel like I've grasped the concepts of how to use React.js effectively yet, so any help is appreciated!

最好的问候和感谢，

bnunamak

代码:

var CategoryList = React.createClass({

getInitialState:function(){
    return {
        items:[
            ["cat1", false],
            ["cat2", true]
        ],
        lastToggled:["cat2"]
    }
},

//Function passed to child (changes items state)
handleClick:function(child){
    var tempItems = this.state.items;
    if(this.state.lastToggled[0] === child.props.name){
        var index = this.getInd(this.state.tempItems, child.props.name);
        tempItems[index][1] = !tempItems[index][1];

        this.setState({items: tempItems});
    }else{
        var newIndex = this.getInd(this.state.tempItems, child.props.name);
        tempItems[newIndex][1] = !tempItems[newIndex][1];

        var oldIndex = this.getInd(this.state.tempItems, this.state.lastToggled[0]);
        tempItems[oldIndex][1] = false;

        this.setState({items: tempItems, lastToggled: tempItems[newIndex][0]});

    }
},

//getInd not relevant to problem
getInd:function(arr, elname){
    for (var i = arr.length - 1; i >= 0; i--) {
        if(arr[i][0] === elname){
            return i;
        }
    };
    return -1;
},

render:function(){
    return (<ul className="category-list">
        {
            this.state.items.map(function(item){
                return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />;
            })
        }
        </ul>)
}

});


var Category = React.createClass({

render:function(){
    if(this.props.selected){
        return (<li onClick={this.propogateClick} className="selected">{this.props.name}</li>);
    }else{
        return (<li onClick={this.propogateClick}>{this.props.name}</li>);
    }
},

propogateClick: function(){
    this.props.onClick(this);
}

});


React.renderComponent(<CategoryList/>, document.getElementById('example'));

推荐答案

您可以使用bind解决此问题

You can use bind to solve this problem

this.state.items.map(function(item){
     return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />;
}.bind(this))

这篇关于React.js-传递的函数“不是函数"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！