小编avi*_*eln的帖子

ReactJS无法访问"this"方法

我试图将方法传递给子组件来处理onclick事件.我在网上看到了很多例子,但我无法让它发挥作用.当我在父项的render函数内部并尝试将"this.handleClick"传递给子项时,handleClick未定义.

看看ThumbList的render方法:

var Thumb = React.createClass({
        handleClick: function() {
            console.log(this)
            console.log('handleClick of Thumb')
            this.props.onClick()
        },
        render: function() {
            return(
                    <div className="thumb" key={this.props.thumb.url}>
                        <a href='#' onClick={this.handleClick}>
                            <img src={'/img/rings/thumbs/'+this.props.thumb.url+'_thumb.jpg'} alt="Image"> 
                            </img>         
                        </a>
                    </div>
                );
        }
    });

    var ThumbList = React.createClass({

        handleClick: function (id) {
            console.log('click of ThumbList');

        },


        loadFromServer: function() {
            $.ajax({
                url: 'rings/imgs/5',
                dataType: 'json',
                success: function(data) {
                    this.setState({data: data});
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error('rings/imgs/5', status, err.toString());
                }.bind(this)
            });
        },
        getInitialState: function(){
            return {data: [] };
        },
        componentDidMount: function(){ …
Run Code Online (Sandbox Code Playgroud)

reactjs

2
推荐指数
1
解决办法
2850
查看次数

标签 统计

reactjs ×1