React Native中如何将Formik回调逻辑移入AppForm组件并正常运行

1. 重构AppForm组件内部逻辑 #

将Formik的回调解构逻辑移到AppForm组件内部，让组件统一处理Formik提供的方法，再传递给子元素。

假设你原本的AppForm组件是这样的：

import { Formik } from 'formik';

const AppForm = ({ initialValues, validationSchema, onSubmit, children }) => {
  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
    >
      {children}
    </Formik>
  );
};

export default AppForm;

修改后的实现：

import { Formik } from 'formik';

const AppForm = ({ initialValues, validationSchema, onSubmit, children }) => {
  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
    >
      {/* 在这里完成Formik方法的解构，再传递给子组件 */}
      {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => {
        // 若children是函数，直接传入解构后的方法集合
        if (typeof children === 'function') {
          return children({
            handleChange,
            handleBlur,
            handleSubmit,
            values,
            errors,
            isValid
          });
        }
        return children;
      }}
    </Formik>
  );
};

export default AppForm;

2. 简化AppForm的使用方式 #

现在使用组件时，无需自己解构全部Formik方法，直接接收封装好的参数即可，功能完全保持一致：

<AppForm
  initialValues={{ email: '', password: '' }}
  validationSchema={loginSchema}
  onSubmit={handleLogin}
>
  {/* 直接解构需要的方法，不用再写冗长的Formik回调参数 */}
  {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => (
    <View>
      <TextInput
        placeholder="邮箱"
        onChangeText={handleChange('email')}
        onBlur={handleBlur('email')}
        value={values.email}
      />
      {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}
      
      <TextInput
        placeholder="密码"
        secureTextEntry
        onChangeText={handleChange('password')}
        onBlur={handleBlur('password')}
        value={values.password}
      />
      {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}
      
      <Button title="提交" onPress={handleSubmit} disabled={!isValid} />
    </View>
  )}
</AppForm>

3. 进阶优化：封装自动关联Formik的输入组件 #

如果想进一步简化代码，可以创建AppFormInput组件，通过Formik上下文自动获取所需方法，彻底省去手动传递的步骤：

import { useFormikContext } from 'formik';
import { TextInput, Text, View } from 'react-native';

const AppFormInput = ({ name, placeholder, ...rest }) => {
  const { handleChange, handleBlur, values, errors } = useFormikContext();
  
  return (
    <View>
      <TextInput
        placeholder={placeholder}
        onChangeText={handleChange(name)}
        onBlur={handleBlur(name)}
        value={values[name]}
        {...rest}
      />
      {errors[name] && <Text style={{ color: 'red', marginTop: 4 }}>{errors[name]}</Text>}
    </View>
  );
};

export default AppFormInput;

此时使用AppForm会更简洁：

<AppForm
  initialValues={{ email: '', password: '' }}
  validationSchema={loginSchema}
  onSubmit={handleLogin}
>
  {({ handleSubmit, isValid }) => (
    <View>
      <AppFormInput name="email" placeholder="邮箱" />
      <AppFormInput name="password" placeholder="密码" secureTextEntry />
      <Button title="提交" onPress={handleSubmit} disabled={!isValid} />
    </View>
  )}
</AppForm>

内容的提问来源于stack exchange，提问作者BennKingy