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

【问题标题】：Auto focus not working on react native formik自动对焦不适用于反应原生formik
【发布时间】：2019-11-08 12:19:27
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-native formik

【解决方案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>
  )
}

【讨论】：