如何在react原生表单验证的函数组件中以编程方式设置text中的文本

Question

如果移动和密码字段为空，我想显示一条错误消息。

这是我的代码：

import React, { useState } from 'react';
export const login = (m, p) => {
if (m == "" || p == "") {
setMessage('mobile & password both are required')
return false;
} else 
{
return true;
}
}
const App: () => React$Node = () => {
const [mobile, setMobile] = useState('');
const [pass, setPass] = useState('');
const [errorMessage, setMessage] = useState('');
return (
<>
<Text style={{ marginTop: 150 }}>
{ errorMessage }
</Text>
<TextInput
onChangeText={mobile => setMobile(mobile)}
defaultValue={mobile} />
<TextInput 
onChangeText={pass => setPass(pass)}
defaultValue={pass} />
<Button
title="Login"
onPress={() => {login(mobile,pass)}}
/>
</>
);
};

当我按下登录按钮时，我会收到以下错误消息：

ReferenceError: Can't find variable: setMessage

有人能帮忙吗。

Answer 1

您正在从钩子函数外部调用login() function。并且setMessage不可用外部挂钩功能App

如下所示：

import React, { useState } from 'react';

const App: () => React$Node = () => {
const [mobile, setMobile] = useState('');
const [pass, setPass] = useState('');
const [errorMessage, setMessage] = useState('');
const login = (m, p) => {
if (m == "" || p == "") {
setMessage('mobile & password both are required')
return false;
} else {
return true;
}
}
return (
<>
<Text style={{ marginTop: 150 }}>
{ errorMessage }
</Text>
<TextInput
onChangeText={mobile => setMobile(mobile)}
defaultValue={mobile} />
<TextInput 
onChangeText={pass => setPass(pass)}
defaultValue={pass} />
<Button
title="Login"
onPress={() => {login(mobile,pass)}}
/>
</>
);
};

然后你可以导出它，如果你想在其他地方使用它，如下所示：

export default App;

如果你出于某种原因需要将login()放在外面，那么你可以这样使用：

export const login = (m, p, setMessage) => { 
if (m == "" || p == "") {
setMessage('mobile & password both are required')
return false;
} else {
return true;
}
}

则当调用CCD_ 4时，通过如下所示的CCD_

<Button
title="Login"
onPress={() => {login(mobile, pass, setMessage)}}
/>