自动对焦不适用于 React Native Formik

Question

我正在使用 formik and react-native-formik 创建表单。我正在使用我的自定义组件以 formik 形式进行文本输入。

我的自定义组件代码：

// import statements ...

class FormInput extends Component {

  focus = () => { this.textInputField.focus(); }

  render() {
    const {props} = this;
    return (
      <TextInput
        {...this.props}
        placeholder={props.placeholder}
        ref={(ref) => { this.textInputField = ref }}
        style={{ height: 50, borderWidth: 1, margin: 5 }}
      />  
    )
  }
}

export default FormInput

然后我从下面的代码创建表单：

const FormInput2 = compose(
  handleTextInput,
  withNextInputAutoFocusInput
)(FormInput);
const Form = withNextInputAutoFocusForm(View);

然后我创建了如下原始表格：

<ScrollView
  style={styles.container}
  contentContainerStyle={styles.contentContainer}
  keyboardShouldPersistTaps="handled"
>
  <Formik
    initialValues={{ firstName: '', email: '', password: '' }}
    onSubmit={values => { }}
    validationSchema={signUpValidationSchema}
    render={({ values, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (
      <Form>
        <FormInput2
          icon="user"
          placeholder="First Name"
          value={values.firstName}
          onChangeText={handleChange('firstName')}
          onBlur={() => setFieldTouched('firstName')}
        />
        {touched.firstName && errors.firstName && (
          <CText style={{ fontSize: 10, color: 'red' }}>{errors.firstName}</CText>
        )}

        {/* 
          ...
          ...
          Others Fiels 
        */}
        <Button
          title="SIGN UP"
          disabled={!isValid}
          color={Colors.primary}
          onPress={handleSubmit}
        />
      </Form>
    )}
  />
</ScrollView>

但是，我在每个字段键盘 return 类型上得到 done。如果我按完成然后表单提交方法触发。

谁能帮我实现自动对焦？

我也试过如下导出我的自定义组件，但它也不起作用：

export default withFormikControl(FormInput)

Answer 1

如果有人也遇到同样的错误，那么这里是解决方案...

自定义组件应具有 name 属性并且组件的顺序应与 initialValues.

相同

表示如果 initialValues 如下：

initialValues={{ firstName: '', lastName: '', email: '', phone: '', password: '', confirmPassword: '' }}

那么首先应该是 firstName 字段，然后是 lastName、email 等等...

所以我在自定义组件中添加了 name 属性并实现了自动对焦。

<FormInput2
  icon="user"
  placeholder="First Name"
  value={values.firstName}
  label="First Name"
  name="firstName" // added this
  type="name"
  onChangeText={handleChange('firstName')}
  onBlur={() => setFieldTouched('firstName')}
/>
{
  touched.firstName && errors.firstName && (
    <CText style={{ fontSize: 10, color: 'red' }}>{errors.firstName}</CText>
  )
}

<FormInput2
  label="Last Name"
  name="lastName" // added this
  type="name"
  icon="user"
  placeholder="Last Name"
  value={values.lastName}
  onChangeText={handleChange('lastName')}
  onBlur={() => setFieldTouched('lastName')}
/>
{
  touched.lastName && errors.lastName && (
    <CText style={{ fontSize: 10, color: 'red' }}>{errors.lastName}</CText>
  )
}

自动对焦不适用于 React Native Formik

Auto focus not working on react native formik

javascript

reactjs

react-native

formik