Javascript React-Native Button onPress 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45883625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Native Button onPress not working
提问by Somename
I'm trying to bind the function handleClickto my button onPress. But it's not working. When I refresh the page, I get the alert without clicking on the button and after I close the alert and click on the button, nothing happens.
我正在尝试将该功能绑定handleClick到我的 button onPress。但它不起作用。当我刷新页面时，我在没有单击按钮的情况下收到警报，在关闭警报并单击按钮后，没有任何反应。
My Code is:
我的代码是：
class ActionTest extends Component {
constructor(props) {
super(props);
this.state = {
thename: 'somename'
};
}
handleClick(){
alert('Button clicked!');
}
render(){
return(
<View>
<Button
onPress={this.handleClick()}
title="Click ME"
color="blue"
/>
</View>
);
}
}
I'm also getting the warning :
我也收到警告：
What am I doing wrong?
我究竟做错了什么？
回答by WayneC
You are calling handleClick when it renders as you have onPress={this.handleClick()}
当它呈现时，您正在调用 handleClick onPress={this.handleClick()}
try onPress={this.handleClick}instead, to pass it the function as a callback.
onPress={this.handleClick}相反，尝试将函数作为回调传递给它。
回答by Vahid Boreiri
First you define your click handler as an arrow function. In this way you don't need to bind the function anymore. Your function will be like this:
首先，您将点击处理程序定义为箭头函数。这样你就不需要再绑定函数了。你的函数将是这样的：
handleClick = () => {
alert('Button clicked!');
}
Then use this function in the <Button>tag like this:
然后在<Button>标签中使用这个函数，如下所示：
<Button
onPress={this.handleClick}
title="Click ME"
color="blue"
/>
回答by Alireza Sheikholmolouki
When react-native detects a click event and wants to notify you, it calls the onPressprop as a function. so you have to give a functionto onPressprop like:
当 react-native 检测到一个点击事件并想要通知你时，它会调用onPressprop 作为一个函数。所以你必须提供一个函数来onPress支持：
onPress={this.handleClick}
this connects onPressto handleClickmethod. but if you want to call other methods in handleClickand you need "thisobject" you can pass the handleClickmethod like this:
这连接onPress到handleClick方法。但是如果你想调用其他方法handleClick并且你需要“this对象”，你可以handleClick像这样传递方法：
onPress={this.handleClick.bind(this)}
Good luck
祝你好运
回答by csath
update your code! you should pass a reference
更新您的代码！你应该传递一个参考
<Button
onPress={this.handleClick}
title="Click ME"
color="blue"
/>
回答by muhammet gürbüz
Can you try it
你可以试试吗
class ActionTest extends Component {
constructor(props) {
super(props);
this.state = {
thename: 'somename'
};
}
handleClick=()=>{
alert('Button clicked!');
}
render(){
return(
<View>
<Button
onPress={this.handleClick}
title="Click ME"
color="blue"
/>
</View>
);
}
}
回答by Thiru
We are supposed to pass a function reference instead of calling it directly while rendering:
我们应该传递一个函数引用而不是在渲染时直接调用它：
Try this:
尝试这个：
onPress={this.handleClick}
回答by hakiko
if you define your function out of scope of your class also you don't use thiskeyword with your handler function
如果你定义你的函数超出你的类的范围，你也不要this在你的处理函数中使用关键字
like
喜欢
//function moved here
const handleClick = () => {
alert('Button clicked!');
}
class ActionTest extends Component {
constructor(props) {
super(props);
this.state = {
thename: 'somename'
};
}
render(){
return(
<View>
<Button
onPress={handleClick()}
title="Click ME"
color="blue"
/>
</View>
);
}
}
