ScrollView中子组件的点击事件问题



  • /**
     * 
     *
     */
    'use strict';
    
    var React = require('react-native');
    var {
      StyleSheet,
      Text,
      View,
      ScrollView,
      TouchableHighlight,
    } = React;
    var BBS  =  new React.createClass({
        getInitialState: function() {
            return {
                loaded: false,
            };
        },
        componentDidMount: function() {
            if(this.props.fid) {
                this.fetchData(this.props.fid);
            }else{
                this.fetchData();  
            }
        },
        fetchData: function(fid) {
            //
            if(fid) {
                REQUEST_URL  += fid;
            }else{
                REQUEST_URL  += '0';
            }
            fetch(REQUEST_URL);
        },
        handleClick: function(forum) {
            console.log('HHH');
        },
        render: function() {
            if( ! this.state.loaded) {
                return (
                    <View style={styles.loading}>
                        <Text>Now loading......</Text>
                    </View>
                )
            }
            return (
                <ScrollView style={styles.container}>
                    {
                        this.state.forums.map(function(forum){
                            return(
                                <TouchableHighlight key={forum.fid} onPress={() => console.log(this)} underlayColor="#ccc">
                                <View style={styles.forumItem}>
                                    <Text style={styles.forumName}>{forum.name}</Text>
                                </View>
                                </TouchableHighlight>
                            )
                        })
                    }
                </ScrollView>
            )
        },
    });
    

    ==========================================
    是一个显示论坛版块的功能,然后点击板块让这个界面显示下级的板块列表,
    我按照 http://facebook.github.io/react/tips/communicate-between-components.html 写了不管用,现在改成了上面的样子,发现 this 根本不存在,这是为什么,是不是我整个组件的思路不对?



  • 1、React.createClass前面不应该用new关键字
    2、map函数中的普通回调函数也会导致this变化的( function(forum){ ...



  • 你说的第一点是 提倡ES6 的写法吧,这个我也继续学习。
    那关于map 看来这种方式是行不通了,那怎么能实现我想要的那个功能呢?有什么思路



  • @yiming465 很简单啊,map里面也用箭头函数而不是function关键字啊 forum =>


Log in to reply