Javascript 本机反应：为什么在单击按钮之前显示警报？

有人能告诉我为什么在运行应用程序时会弹出警报吗

这是我的组件的源代码

import React from 'react';
import { Text, TouchableOpacity, Alert } from 'react-native';

const Button = () => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity onPress={Alert.alert('A', 'B')} style={buttonStyle}>
    <Text style={textStyle}> Log </Text>
    </TouchableOpacity>
  );
};

const styles = {

  textStyle: {
    alignSelf: 'center',
    color: '#27b535',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10

  },

  buttonStyle: {
    //flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#27b535',
    marginLeft: 5,
    marginRight: 5
  }

};

export default Button;

从“React”导入React；
从“react native”导入{Text，TouchableOpacity，Alert}；
常量按钮=（）=>{
const{buttonStyle，textStyle}=样式；
返回(
日志
);
};
常量样式={
文本样式：{
对齐自我：“中心”，
颜色：“#27b535”，
尺寸：16，
重量：'600'，
paddingTop:10，
垫底：10
},
按钮样式：{
//弹性：1，
自我定位：“拉伸”，
背景颜色：“#fff”，
边界半径：5，
边框宽度：1，
边框颜色：“#27b535”，
边缘左：5，
marginRight:5
}
};
导出默认按钮；

从上面的源代码可以看出，我在按下按钮时会弹出一个警报，但发生的情况是，一旦我的应用程序运行，就会显示此警报框，而当我实际单击按钮时，警报框不会显示

---

有人能解释一下为什么会发生这种情况吗？

您通常需要将函数作为属性传递给以后的执行

（）=>…

定义了箭头函数

改变这个

onPress={Alert.alert('A', 'B')}

到

---

通常需要将函数作为属性传递给以后的执行

（）=>…

定义了箭头函数

改变这个

onPress={Alert.alert('A', 'B')}

到

---

您需要将该函数传递到onPress。您现在正在调用

警报

，而没有传递要在

onPress中调用的函数

---

Alert.Alert（'A'，'B'）}style={buttonStyle}>

您需要将函数传递给onPress。您现在正在调用

警报

，而没有传递要在

onPress中调用的函数

---

Alert.Alert（'A'，'B'）}style={buttonStyle}>

我知道它已被回答，但要解决添加此回答时出现的其他错误：

您应该使用该函数调用

警报

，而不是直接使用它，这要感谢@KhalilKhalaf指出了它

您错过了

（）=>

showAlert = () =>
{
  Alert.alert('A', 'B');
}

<TouchableOpacity onPress={this.showAlert} style={styles.buttonStyle}>

showAlert=（）=>
{
警报。警报（'A'，'B'）；
}

也

style={style.buttonStyle}//缺少样式
日志

我知道已经回答了，但要解决添加此答案时出现的其他错误：

您应该使用该函数调用

警报

，而不是直接使用它，这要感谢@KhalilKhalaf指出了它

您错过了

（）=>

showAlert = () =>
{
  Alert.alert('A', 'B');
}

<TouchableOpacity onPress={this.showAlert} style={styles.buttonStyle}>

showAlert=（）=>
{
警报。警报（'A'，'B'）；
}

也

style={style.buttonStyle}//缺少样式
日志

在onPress中使用箭头功能是一种不好的做法。最好定义函数，并传递其名称。请参阅这里的更多内容：如果您擅长JavaScript，最好考虑在Engor组件类中添加成员函数，并将其绑定到构造函数中的<>代码/>代码>上下文。最好定义函数，并传递其名称。请参阅这里的更多内容：如果您擅长JavaScript，最好考虑在Engor组件类中添加成员函数，并将其绑定到构造函数中的<>代码/>代码>上下文。最好定义函数，并传递其名称。请参阅此处的更多信息：在onPress中使用箭头功能是一种不好的做法。最好定义函数，并传递其名称。请参阅此处的更多信息：在onPress中使用箭头功能是一种不好的做法。最好定义函数，并传递其名称。更多信息请参见：谢谢，更新的代码。我已经创建了相同的演示，但它已经得到了回答，所以我保留了那个代码。请参阅我第一条评论中的参考。使用类似于

letmyfunc=（）=>{/*做某事*/}

，然后使用

onPress={this.myFunc}

。否则，每次渲染组件时，它都会定义一个新函数（性能命中->错误）。在onPress中使用箭头函数是一种错误的做法。最好定义函数，并传递其名称。更多信息请参见：谢谢，更新的代码。我已经创建了相同的演示，但它已经得到了回答，所以我保留了那个代码。请参阅我第一条评论中的参考。使用类似于

letmyfunc=（）=>{/*做某事*/}

，然后使用

onPress={this.myFunc}

。否则，每次你的（组件）呈现时，它都会定义一个新函数（性能命中->坏），你接受了坏的（仍在工作）答案，但是坏的答案。另一个答案是正确的。你接受了一个糟糕的答案，但是这个答案很糟糕。另一个答案是正确的。