如何在React中将函数作为属性从一个组件传递到另一个组件

时间:2016-12-13 16:18:33

标签: function reactjs properties components

我正在使用以下代码将一个组件的功能作为属性传递给另一个功能但是会出现以下错误

无法读取属性' updateComment'未定义的

这是我的代码

class Board extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            comments:[
                'This is first',
                'This is Second',
                'This is Third'
            ]
        };

        /*this.updateComment = this.updateComment.bind(this);*/
        this.removeComment = this.removeComment.bind(this);
    }



    eachComment(text,i){
        return(
            <Comment key={i} index={i}  update={this.updateComment} remove={this.removeComment}>
                {text}
            </Comment>
        );
    }

    render(){
        return(
            <div>
            {
                this.state.comments.map(this.eachComment)
            }
            </div>
        )
    }

    removeComment(i){
        var arr = this.state.comments;
        arr.splice(i,1);
        this.setState({comments:arr});
    }

    updateComment(newText,i){
        var arr = this.state.comments;
        arr[i] = newText;
        this.setState({comments:arr});
    }
}

请让我知道我在做什么。

1 个答案:

答案 0 :(得分:1)

您的地图函数eachComment并未引用全局范围,因此您无法使用this关键字updateComment。您需要将其绑定到全局范围

调用地图功能,如

{this.state.comments.map(this.eachComment.bind(this))}