Автофокус не работает, реагируют на родной формик - PullRequest
Новая
       7

Автофокус не работает, реагируют на родной формик

0 голосов
/ 08 ноября 2019

Я использую formik и Reaction-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)

1 Ответ

0 голосов
/ 09 ноября 2019

Если у кого-то тоже такая же ошибка, то здесь есть решение.
Пользовательский компонент должен иметь свойство name. И порядок компонентов такой же, как initialValues.
Значит, если initialValues, как показано ниже: 

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

Тогда сначала должно быть поле firstName, затем lastName, email и т. Д. на ...

Поэтому я добавил name prop в пользовательский компонент и работал автофокус. 

<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>
  )
}
...