课程目标
本节课程将学习如何使用 Formik 组件构建登录页面的表单功能，包括表单初始化、事件处理和表单提交等内容。
1. 登录页面设计
登录页面的设计非常简单，包含以下内容：
- 两个输入框：账号 和 密码。
- 验证规则：账号和密码均不能为空。
2. 安装 Formik
Formik 是一个强大的表单库，提供了以下功能：
- 输入控件的值管理
- 验证和错误处理
- 表单提交
安装命令如下：
yarn add formik
3. 在 Login 组件中使用 Formik
3.1 引入 Formik
在组件中引入 Formik 和 Field：
import { Formik, Field } from 'formik';
3.2 Formik 组件的基本结构
Formik 提供了一个名为 Formik 的组件，可以通过它快速构建表单。以下是基本结构：
<Formik>
</Formik>
3.3 配置 Formik 的属性
Formik 组件可以接收以下重要属性：
1. initialValues
initialValues 用于初始化表单的数据。它是一个对象，包含表单的所有字段。
const initialValues: Values = {
account: '',
password: '',
};
// 声明 Values 类型
interface Values {
account: string;
password: string;
}
2. onSubmit
onSubmit 是表单提交时触发的函数。通过参数可以获取表单的所有输入值。
onSubmit = (values: Values) => {
// 登录逻辑
};
完整的 Formik 组件示例如下：
<Formik
initialValues={initialValues}
onSubmit={this.onSubmit}
>
{({ handleSubmit, values }) => (
// 表单内容
)}
</Formik>
4. Formik 的核心函数
在 Formik 的 children 函数中，我们可以通过参数获取以下核心函数：
- values：当前表单的所有字段数据。
- handleSubmit：触发 Formik 的
onSubmit方法。 - handleChange：用于处理输入控件的输入事件。
- handleBlur：用于处理控件失去焦点的事件。
5. 构建登录表单
以下是使用 Formik 构建登录表单的完整代码：
<View>
<TextInput
placeholder="请输入账号"
onChangeText={handleChange('account')}
onBlur={handleBlur('account')}
value={values.account}
/>
<TextInput
placeholder="请输入密码"
onChangeText={handleChange('password')}
onBlur={handleBlur('password')}
value={values.password}
secureTextEntry // 隐藏输入的文本
/>
<Touchable onPress={handleSubmit}>
<Text>登录</Text>
</Touchable>
</View>
注意事项
handleChange和handleBlur需要绑定具体的字段名称，例如account和password。secureTextEntry属性用于隐藏密码输入。
6. 添加登录逻辑
6.1 使用 connect 函数
为了获取 Redux 的 dispatch 方法，我们需要使用 connect 函数：
const mapStateToProps = ({ loading }: RootState) => {
return {
loading: loading.effects['user/login'], // 获取登录加载状态
};
};
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;
6.2 实现 onSubmit 函数
在 onSubmit 函数中，可以通过参数 values 获取表单输入的数据，并调用 dispatch 方法提交登录请求：
onSubmit = (values: Values) => {
const { dispatch, navigation } = this.props;
// 调用 Redux 的登录 action
dispatch({
type: 'login/login',
payload: values,
});
};
7. 小结
本节内容总结：
- 学习了如何使用 Formik 构建登录页面的表单。
- 掌握了 Formik 的核心属性和方法：
initialValues、onSubmit、handleChange、handleBlur、handleSubmit。 - 实现了登录逻辑，结合 Redux 提交表单数据。
下一节预告
在下一节中，我们将学习如何使用 yup 库对表单输入的数据进行校验，确保数据的合法性。
