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

Question

问题

我要怎么写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>

Answer 1

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

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

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

Answer 2

首先说你这个思路不对，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>
    }
}

Answer 3

如楼上思路，我最终这样实现：

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

handleClickMenu: function(str){...}