ReactNative警告:bind(): React component methods may only be bound to the component instance

本人只粗略了解标签语言，至于html5，js，css啥的完全外行。我认为ReactNative是移动App开发的趋势，作为一个iOS开发工程师，深知原生开发的局限性，从今天起，像个孩子一样学习RN。使用教材《React Native入门与实践》

在学习第6章二级菜单组件时，报了个警告

bind(): React component methods may only be bound to the component instance

 <Text onPress={this.props.click.bind(this,data[i][k][j])} style={[styles.left_row]} key={i+'_'+j+'_'+k}>{data[i][k][j]}</Text>

将bind()函数里的this改为null

 <Text onPress={this.props.click.bind(null,data[i][k][j])} style={[styles.left_row]} key={i+'_'+j+'_'+k}>{data[i][k][j]}</Text>

详细参考
http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html

整体代码如下

var data = {
  "全部区域":{
    "全部区域":["全部区域"],
    "热门商圈":[
      "虹桥地区",
      "徐家汇地区",
      "淮海路商业区",
    ],
    "热门行政区":[
      "静安区",
      "徐汇区",
      "长宁区",
    ],
  },
  "地铁沿线":{
    "地铁全线":["地铁全线"],
    "一号线":[
    "六号桥",
    "回龙观"],
    "二号线":[
    "六号桥一",
    "回龙观"],
  },
};


import React, {
  AppRegistry,
  ScrollView,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';


var prefixType = '_type_';
var prefixStyle = '_style_';
var defaultBackgroundColor = {backgroundColor:'#fff'};

var MenuList = React.createClass({



  getInitialState:function(){

    var data = this.props.data;
    var nSelected = this.props.nSelected;
    var tabSelected = this.props.tabSelected;
    var obj = {};
    var kIndex = 0;
    for(var k in data){
      var childData = data[k];
      var cIndex = 0;
      for(var c in childData){
        var type = prefixType+k+'_'+c;
        var style = prefixStyle+k+'_'+c;
        obj[type]=false;
        obj[style]={};
        if (nSelected === cIndex && tabSelected === kIndex) {
          obj[type] = true;
          obj[style] = defaultBackgroundColor;
        }
        cIndex++;
      }
      kIndex++;
    }
    obj.tabSelected = tabSelected;
    obj.nSelected = nSelected;

    return obj;
  },

  render:function(){

    var header = this.renderHeader();
    var left = this.renderLeft();
    var right = this.renderRight();

    return(
      <View  style={styles.container}>
      <View  style={[styles.row,styles.header]}>
        {header}
      </View>

      <View  style={[styles.row,styles.flex_1]}>

        <ScrollView  style={[styles.flex_1,styles.left_pannel]}>
          {left}
        </ScrollView>

       <ScrollView  style={[styles.flex_1,styles.right_pannel]}>
          {right}
        </ScrollView>
      </View>


      </View>

      );
  },

  //头部
  renderHeader:function(){
    var data = this.props.data;
    var tabSelected = this.state.tabSelected;
    var header = [];
    var tabIndex = 0;
    for(var i in data){
      var tabStyle = null;
      if (tabIndex === tabSelected) {
        tabStyle = [styles.header_text,styles.active_blue];
      }else{
        tabStyle = [styles.header_text];
      }
      header.push(
        <TouchableOpacity style = {[styles.flex_1,styles.center]}
         onPress={this.headerPress.bind(this,i)} key={i}>
          <Text  style={styles.tabStyle} key={i}>{i}</Text>
         </TouchableOpacity>
        );
      tabIndex++;
    }
    return header;
  },
   //左侧
  renderLeft:function(){
    var data = this.props.data;
    var tabSelected = this.state.tabSelected;
    var leftPannel = [];
    var index = 0;

    for(var i in data){
      if (index === tabSelected) {
        for(var k in data[i]){
          var style = this.state[prefixStyle+i+'_'+k];
          leftPannel.push(
            <Text onPress={this.leftPress.bind(this,i,k)} style={[styles.left_row,style]} key={i+'_'+k}>{k}</Text>
            );
        }
        break;

      }
      index++;

    }

    return leftPannel;
  },

    //右侧
  renderRight:function(){
    var data = this.props.data;
    var tabSelected = this.state.tabSelected;
    var nSelected = this.state.nSelected;
    var rightPannel = [];
    var index = 0;

    for(var i in data){

      if (tabSelected === index) {
        for(var k in data[i]){
          if (this.state[prefixType+i+'_'+k]) {
            for(var j in data[i][k]){
              rightPannel.push(
                <Text onPress={this.props.click.bind(null,data[i][k][j])}
                style={[styles.left_row]} key={i+'_'+j+'_'+k}>{data[i][k][j]}</Text>

                );
            }
            break;

          }
        }

      }



      index++;

    }

    return rightPannel;
  },

 headerPress:function(title){

  var data = this.props.data;
  var index = 0;
  for(var i in data){

    if (i === title) {
      this.setState({
        tabSelected:index,
      });
      var obj = {};
      var n = 0;
      for(var k in data[i]){
        if (n !== 0) {
          obj[prefixType+i+'_'+k] = false;
          obj[prefixStyle+i+'_'+k] = {};
        }else{
           obj[prefixType+i+'_'+k] = true;
           obj[prefixStyle+i+'_'+k] = defaultBackgroundColor;         
        }
        n++;
      }
      this.setState(obj);
    }

    index++;

  }

 },


 leftPress:function(tabIndex,nIndex){
    var obj = {};
    for(var k in this.state){
      //全部置为false
      if (k.indexOf(prefixType) > -1) {
        var obj = {};
        obj[k] = false;
        this.setState(obj);
      }

      if (k.indexOf(prefixStyle) > -1) {
        var obj = {};
        obj[k] = {}
      };
      this.setState(obj);
    }

      obj[prefixType+tabIndex+'_'+nIndex] = true;
      obj[prefixStyle+tabIndex+'_'+nIndex] = defaultBackgroundColor;
      this.setState(obj);


  },


});


var styles = StyleSheet.create({
  container: {

    height:240,
    flex:1,
    borderTopWidth:1,
    borderBottomWidth:1,
    borderColor:'#ddd',

  },

  row:{
    flexDirection:'row',
  },

  flex_1:{
    flex:1,
  },
  header:{
    height:35,
    borderBottomWidth:1,
    borderColor:'#DFDFDF',
    backgroundColor:'#F5F5F5',

  },
  header_text:{
    color:'#7B7B7B',
    fontSize:15,
  },
  center:{
    justifyContent:'center',
    alignItems:'center',

  },
  left_pannel:{
    backgroundColor:'#F2F2F2'
  },
  left_row:{
    height:30,
    lineHeight:20,
    fontSize:14,
    color:'#7C7C7C',
  },
  right_pannel:{
    marginLeft:10,
  },
  active_blue:{
    backgroundColor:'#00B7EB',
  },
  active_fff:{
    backgroundColor:'#fff',
  }

});

var App = React.createClass({
  render:function(){
    return(
      <View style = {{marginTop:25}}>

      <MenuList data={data} nSelected={1} tabSelected={0} click={this.onPress}/>
      </View>
      );
  },
  onPress:function(val){
    alert(val);
  }
});

AppRegistry.registerComponent('Chapter6Code', () => App);