自动对焦不适用于反应原生formik

Question

我正在使用formik和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>

但是，我正在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>
  )
}