使用RN开发APP,按照一般的思路,比如我们在动态生成一个文章列表,然后当用户点击(TouchableHighlight)文章标题的时候,需要显示文章详情,此时需要在生成的每个列表上添加一个触摸事件,类似如下:
一行标题: class Title extends Component{ _onPress(){ Alert.alert(‘test‘,‘test‘); } render(){ return( <TouchableHighlight onPress={() => this.onPress() } > <Text>{this.props.name}</Text> </TouchableHighlight> ) } } 标题列表循环显示: { article_array.map( (name)=>( <Title name={name} /> ) ) }
当是当我们在模拟器上刷新的时候,此时并没有触发标题点击事件,但是却会弹出N个Alert对话框,那么我们就感到奇怪了,这个触摸事件为何为自动触发呢?
此时,不妨我们换一种写法,把要触发的方法,传递到要生成的组件中,作为组件的一个属性去调用,而不是把触发方法,写到子组件内部。
一个标题: class Title extends Component{ render(){ return( <TouchableHighlight onPress={() => this.props.onPress() } > <Text>{this.props.name}</Text> </TouchableHighlight> ) } } 标题列表循环显示:
export default class NewTest extends Component {
_onPress(){
Alert.alert(‘test‘,‘test‘);
}
render(){
{ article_array.map( (name)=>( <Title name={name} onPress={this._onPress} /> ) ) }}
}
这回,我们在刷新的时候,发现正常了。
假如要动态生成的组件列表中包含事件,那么要把事件处理方法,当成组件属性,传递过来。
时间: 2024-10-10 14:10:58