Reactjs 如何仅在按钮单击单个函数后在react native中运行函数？

通过使用react native和php，我试图构建一个登录页面，从mysql服务器获取数据，如果它在，屏幕将重定向到另一个屏幕。我是react的新手，我在setState上迷路了，每次我更新textinput时都会运行登录功能。因此，每次我输入时，警报都会出现，直到我最终设法将正确的数据插入字段。我只希望该功能在单击按钮后运行。我如何解决这个问题？ 谢谢

下面显示的是代码

import React, { useState } from 'react';
import { ImageBackground, View, StyleSheet, Image, Text, TextInput, TouchableOpacity, Alert, Button } from 'react-native';

export default function LoginScreen({navigation}) {

    const [employeeNo, setEmployeeNo] = useState('');
    const [employeePassword, setEmployeePassword] = useState('');

    const loginEmployee = () => {
        var empNo = employeeNo;
        var empPass = employeePassword;

        if(empNo.length==0 || empPass==0){
            alert("Please insert all required fields!")
        }else{
            var apiURL = "http://example.com/api/login.php";
            var headers = {
                'Accept':'application/json',
                'Content-Type':'application.json',
            };
            var data = {
                empNo: empNo,
                empPass: empPass
            };
            fetch(apiURL,
                {
                    method:'POST',
                    headers: headers,
                    body: JSON.stringify(data)
                })
            .then((response)=>response.json())
            .then((response)=>
            {
                if (response[0].isCorrect ==1){                   
                    navigation.navigate('Home');
                }else{
                    Alert.alert(
                        "Error","Invalid employeeNo / Password. Please try again!"
                    )
                }
            }
                )
            .catch((error)=>{
                alert("Error" + error);
            })
        }
    }
    return(
        <View style={styles.container}>
            <ImageBackground
            source={require('../assets/log-bg.jpg')} 
            style={styles.image}>
                <Image
                source={require('../assets/logo.png')}
                style={styles.logo}
                />
                <Text style={styles.text}>Mobile Application</Text>
                <View style={styles.inputStack}>
                    <Text
                    style={styles.loginText}
                    >Please Sign in to Continue</Text>
                    <TextInput
                    style={styles.input}
                    placeholder="Employee No..."
                    keyboardType='numeric'
                    onChangeText={employeeNo=>setEmployeeNo(employeeNo)}
                    />
                    <TextInput
                    style={styles.input}
                    placeholder="Password..."
                    secureTextEntry={true}
                    onChangeText={employeePassword=>setEmployeePassword(employeePassword)}
                    />
                    <Text
                    style={styles.hyperlink}
                    >Doesn't have an account? Click here to register.</Text>
                    <Button title='Press' onPress={()=> navigation.navigate('Home')}/>
                </View>
                <View style={ styles.bottomView} >
                    <TouchableOpacity 
                    onPress={loginEmployee()}
                    style={styles.button}>
                        <Text style={styles.textStyle}
                        >LOGIN</Text>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        </View>
    )
}

import React，{useState}来自“React”；
从“react native”导入{ImageBackground、View、StyleSheet、Image、Text、TextInput、TouchableOpacity、Alert、Button}；
导出默认函数LoginScreen（{navigation}）{
const[employeeNo，setEmployeeNo]=useState（“”）；
const[employeePassword，setEmployeePassword]=useState（“”）；
const loginEmployee=（）=>{
var empNo=雇员人数；
var empPass=员工密码；
if（empNo.length==0 | | empPass==0）{
警报（“请插入所有必填字段！”）
}否则{
var apirl=”http://example.com/api/login.php";
变量头={
“接受”：“应用程序/json”，
“内容类型”：“application.json”，
};
风险值数据={
empNo:empNo，
empPass:empPass
};
获取（apirl，
{
方法：'POST'，
标题：标题，
正文：JSON.stringify（数据）
})
.then（（response）=>response.json（））
。然后（（响应）=>
{
如果（响应[0].isCorrect==1）{
导航。导航（“主页”）；
}否则{
警惕，警惕(
“错误”，“无效的员工编号/密码。请重试！”
)
}
}
)
.catch（（错误）=>{
警报（“错误”+错误）；
})
}
}
返回(
移动应用
请登录以继续
setEmployeeNo（employeeNo）}
/>
setEmployeePassword（employeePassword）}
/>
没有帐户？请单击此处注册。
导航。导航（'Home'）}/>
登录
)
}

问题在于：

<TouchableOpacity 
    onPress={loginEmployee()} <--- Here
    style={styles.button}
>
    <Text style={styles.textStyle}>LOGIN</Text>
</TouchableOpacity>

问题在于：

<TouchableOpacity 
    onPress={loginEmployee()} <--- Here
    style={styles.button}
>
    <Text style={styles.textStyle}>LOGIN</Text>
</TouchableOpacity>


这一行就是问题所在，基本上每次组件更新都会触发您的函数

为什么?

例如，使用.map（）动态显示某些内容时，可以使用
{this.state.data.map（（item）=>{item.name}}

在您的查看页面中，您是否同意我的观点，您将看到右侧显示的名称

因为您正在执行这个函数，所以react读取它并按照您的要求执行它

现在，关于你的按钮，你不想一直被执行，就在它被按下的时候。要解决这个问题，您需要这样写：

onPress={() => loginEmployee()}

或者像joessel写的那样它也很好用

onPress={loginEmployee}

这样做，它不会自动触发，但只有在事件启动时才会触发

这一行就是问题所在，基本上每次组件更新都会触发您的函数

为什么?

例如，使用.map（）动态显示某些内容时，可以使用
{this.state.data.map（（item）=>{item.name}}

在您的查看页面中，您是否同意我的观点，您将看到右侧显示的名称

因为您正在执行这个函数，所以react读取它并按照您的要求执行它

现在，关于你的按钮，你不想一直被执行，就在它被按下的时候。要解决这个问题，您需要这样写：

onPress={() => loginEmployee()}

或者像joessel写的那样它也很好用

onPress={loginEmployee}

这样做，它不会自动触发，但只有在活动启动时才会触发。
感谢您的帮助。我现在知道adding（）将立即调用函数。谢谢您的帮助。现在我知道adding（）将立即调用函数。谢谢您的回答。现在我明白了什么时候应该在函数后添加（）了。谢谢你的回答。现在我明白了什么时候应该在函数后面添加（）了。