首页 > 获取TouchableHighlight组件中子组件Text的内容

获取TouchableHighlight组件中子组件Text的内容

问题

我要怎么写this.handleClickMenu函数才可以使得,点击TouchableHighlight组件的时候可以获取相应的Text组件中的内容啊?希望大家给点思路

部分代码

<View>
  <TouchableHighlight underlayColor='#544b44' onPress={this.handleClickMenu}>
    <View style={MenuListStyle.menuItem}>
      <Icon name='heart' color='#df7454' style={MenuListStyle.menuItemIcon}/>
      <Text style={MenuListStyle.menuItemText}>GODDESS</Text>
    </View>
  </TouchableHighlight>
  <TouchableHighlight underlayColor='#544b44' onPress={this.handleClickMenu}>
    <View style={MenuListStyle.menuItem}>
      <Icon name='rss' color='#03a9f4' style={MenuListStyle.menuItemIcon}/>
      <Text style={MenuListStyle.menuItemText}>BLOG</Text>
    </View>
  </TouchableHighlight>
  ...
</View>

如楼上思路,我最终这样实现:

onPress={this.handleClickMenu.bind(this, 'GODDESS')}

handleClickMenu: function(str){...}


没有办法做到。你这个思路就不对。
正常的做法是:这两个可触摸组件的onPress函数是不同的函数名。这样自然就能分辨出用户按的是哪一个了。
还有个复杂些的办法是:

   onPress ={() => this.handleClickMenu('GODDESS')}>
    ......
    onPress ={() => this.handleClickMenu('BLOG')}>

这样处理函数在被调用时,会收到参数,参数里就是TEXT的值。


首先说你这个思路不对,react(react native 的基础)是数据驱动框架,用数据驱动视图,一切操作最好应当归结到 Model 上来。
其次,DOM 这个全称 document object model,文档对象模型,用来操作 HTML、XMl 文档的,react native 里没有这个东西。
因为真的不推荐这种做法,所以答案写在最后
如果实在需要这个操作,可以类似这样写

class App extends React.Component {
    componentDidMount() {
        console.log(this._c.props.children) // this is text
    }
    
    render() {
        return <Text ref={(component) => this._c = Component} >this is text</Text>
    }
}
【热门文章】
【热门文章】