React Native onPress被自动调用
我在使用react-native onPress功能时遇到问题。 onPress应该只在触摸事件触发事件时发挥作用(我想),那就是当我按下屏幕上的按钮时。但是,在调用渲染函数时,似乎onPress会触发自己。当我尝试手动按下时,它不起作用。React Native onPress被自动调用
import React, { Component } from 'react';
import { PropTypes, Text, View ,Alert } from 'react-native';
import { Button } from 'react-native-material-design';
export default class Home extends Component {
render() {
return (
<View style={{flex:1}}>
<Button value="Contacts" raised={true} onPress={this.handleRoute('x')} />
<Button value="Contacts" raised={true} onPress={this.handleRoute('y')} />
<Button value="Contacts" raised={true} onPress={this.handleRoute('z')} />
</View>
);
}
handleRoute(route){
alert(route) // >> x , y, z
}
}
module.exports = Home;
我在想什么?我分配的方式有什么问题吗?或者这是一些错误? 任何建议,非常感谢。
尝试改变
onPress = {this.handleRoute( 'X')} //在这种情况下handleRoute功能,一旦发生渲染所谓
到
onPress = {()=> this.handleRoute.bind('x')} //在这种情况下handleRoute d oesn't尽快称为渲染发生
关于为什么会有这种行为的任何想法? –
不清楚(我不想提供虚假信息),会很快让你知道 –
可以改成这样:
onPress={this.handleRoute.bind(this, 'x')}
或本:
onPress={() => this.handleRoute('x')}
的原因是onPress取一个函数作为参数。在你的代码中,你正在调用函数并立即返回结果(当调用render时),而不是返回函数React稍后调用press事件。
您需要绑定(this)的原因是因为当您刚刚执行(this.handleRoute)时,函数失去了绑定实例并且您必须告诉它要使用哪个。绑定函数稍后会使用其他参数调用该函数。有关绑定的更多描述性信息,请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind。
还有一种方法可以在的构造函数中进行绑定。你可以阅读关于如何在React中处理这个问题的方法:https://facebook.github.io/react/docs/handling-events.html
更清晰有用,那么我的回答 –
很好的解释,谢谢。 –
我只碰过reactjs一次,但我认为你调用的是函数而不是分配它。 – cipher