反应onClick preinitialization

时间:2016-06-29 12:10:38

标签: javascript reactjs onclick

这是我的React.component代码。 OnClick事件在页面初始化时执行,我无法解决这个问题,我尝试了2 on on over maping,但这没有任何意义:

handleClick (id){
        alert(id);
    }

    render() {
        var tmp = this.handleClick;
        return(
            <div className="thirteen wide column">
                <div className="rrc-title">Магазины, нарушающие РРЦ</div>
                <div className="custom-hr"></div>
                <div className="ui grid">
                    {
                        jsonResult.data.map(function(el){
                            return (

                                <div className="three wide column">
                                    <div className="store-item-bad" onClick={tmp(el.siteId)}>
                                        <div className="siteName">{el.siteName}</div>
                                        {
                                            el.values.map(function(element){
                                                var processWidth ={
                                                    background : element.color,
                                                    width: element.percent+'%'
                                                }
                                                return(
                                                    <div className="BarItem">
                                                        <div className="progressBar">
                                                            <div className="ui tiny progress">
                                                                <div className="bar" style={processWidth}></div>
                                                            </div>
                                                        </div>
                                                        <div className="progressCounter">{element.count}</div>
                                                    </div>)

                                            })
                                        }

                                    </div>
                                </div>
                            );
                        })
                    }
                </div>
                <div className="rrc-title">Магазины, соблюдающие РРЦ</div>
                <div className="custom-hr"></div>
                <div className="ui grid">
                    {
                        jsonResult.data.map(function(el){
                            return (
                                <div className="three wide column">
                                    <div className="store-item-ok">
                                        <div className="siteName">{el.siteName}</div>
                                        {
                                            el.values.map(function(element){
                                                var processWidth ={
                                                    background : element.color,
                                                    width: element.percent+'%'
                                                }
                                                return(
                                                <div className="BarItem">
                                                    <div className="progressBar BarFloatingLeft">
                                                        <div className="ui tiny progress">
                                                            <div className="bar" style={processWidth}></div>
                                                        </div>
                                                    </div>
                                                    <div className="progressCounter">{element.count}</div>
                                                </div>)

                                            })
                                        }

                                    </div>
                                </div>
                            );
                        })
                    }

                </div></div>
        );
    }

这很容易,但我现在无法集中注意力,所以我需要你的帮助:)

1 个答案:

答案 0 :(得分:0)

尝试:

onClick={this.handleClick.bind(this,el.siteId)} or
onClick={tmp.bind(this,el.siteId)} 

在地图中添加箭头功能:

map(e=>{})