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