react render里的变量，在事件中获取不到？

Question

var ProductionStyleBox=React.createClass({
        handClick: function(){
            console.log(arr)
        },
        render : function(){
            var arr=[];
            return (
                <li onClick={this.handClick}>
                    <ProductionStyle1 />
                </li>
            )
        }
    })

Answer 1

handClick()与render()本身是两个独立的函数,作用域也是独立的.所以访问不到是正常的

Answer 2

arr的作用域在render中,要在另外一个函数中使用的话，就要传参数过去。做如下修改:

onClick ={this.handleClick(arr)}

handleClick(arr) {
  console.log(arr);
}

Answer 3

你可以把render和handClick看作两个独立的函数，那么这两个独立的函数的作用域自然是不同的。
arr是定义在render中的局部变量，所以你在外部的函数中是获取不到的。

Answer 4

render 和 handClick两个是相互独立的函数，你要handClick能获取到render里面的函数，可以onClick的时候传递过去，详细见下面：

var ProductionStyleBox=React.createClass({
        handClick: function(arr){
            console.log(arr)
        },
        render : function(){
            var arr=[];
            return (
                <li onClick={() => this.handClick(arr)}>
                    <ProductionStyle1 />
                </li>
            )
        }
    })