自动调用本机 onPress

我在新闻专题中遇到了反应本地化的问题。OnPress 应该只有在触摸事件(我假设)实际触发时才能工作，也就是当我按下屏幕上的按钮时。但似乎 onPress 在调用 render 函数时会自动触发。当我试图手动按，它不工作。

  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;

我错过了什么？是我布置的方式有问题，还是有什么问题？ 非常感谢您的建议。

视频

39660 次浏览
小开
最佳答案

试着改变

OnPress = { this. handleRoute (‘ x’)}//在这种情况下，一旦呈现发生，就会调用 handleRoute 函数

到

OnPress = {() = > this. handleRoute.bind (‘ x’)}//在这种情况下，handleRoute 不会在呈现发生时立即调用

小开

你可以改成这样:

onPress={this.handleRoute.bind(this, 'x')}

或者这样:

onPress={() => this.handleRoute('x')}

原因是 onPress 接受一个函数作为参数。在代码中，调用函数并立即返回结果(在调用呈现时) ，而不是返回 参考资料函数，以便在稍后的新闻事件中调用 React 函数。

之所以需要 bind (this) ，是因为在执行这个操作时，函数会丢失它的绑定实例(this.handleRoute) ，并且必须告诉函数使用哪个 这个。Bind 函数接受其他参数，以便稍后调用该函数。有关 bind 的更多描述性信息，请参见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind。

在 构造函数中还有另一种绑定方式。你可以在 React here: https://facebook.github.io/react/docs/handling-events.html阅读处理这个问题的方法

小开 
onPress={this.handleevent.bind(this, 'A')}

或使用以下方法:

onPress={() => this.handleevent('B')}
小开

改变

onPress={this.handleRoute('x')}

到

onPress={()=>this.handleRoute('x')}

否则，一旦调用 render 方法，就会立即调用函数 。

小开

这种行为的原因是在每一个渲染，引用的功能是创建的。

因此，为了避免这种情况，可以使用 bind 函数 OR 箭头函数调用 onPress


提交答案