React Native + Redux Form - на maxLength перейти к следующему полю - PullRequest
Новая
       55

React Native + Redux Form - на maxLength перейти к следующему полю

0 голосов
/ 04 июня 2018

Здравствуйте, я хочу сделать 4 ввода для пин-кода, и все в порядке, просто я хотел бы добавить функциональность, так как мы пишем numer в Field1, это приводит нас к Field2 и т. Д. Вот мой код:

InputКомпонент: 

 InputComponent = ({ input, meta, ...rest }) => (
    <Input {...rest} keyboardType="numeric" maxLength={1} value={input.value} onChangeText={input.onChange} />
  );

Форма: 

<Form style={styles.form}>
    <View style={styles.inputs}>
        <Field style={styles.input} name="pin1" component={this.InputComponent} placeholder="*" secureTextEntry />
        <Field style={styles.input} name="pin2" component={this.InputComponent} placeholder="*" secureTextEntry />
        <Field style={styles.input} name="pin3" component={this.InputComponent} placeholder="*" secureTextEntry />
        <Field style={styles.input} name="pin4" component={this.InputComponent} placeholder="*" secureTextEntry />
    </View>
</Form>

1 Ответ

0 голосов
/ 04 июня 2018

Здесь Вы можете использовать Ref, чтобы решить вашу проблему.

здесь 

<FormInput
 ref='forminput'
 textInputRef='email'
 ...
 />

Вы должны иметь доступ к ссылкам, таким как this.refs.forminput.refs..email.focus () .для каждого входного сигнала.

с использованием фокуса будет фокусироваться на конкретном входе в соответствии с ссылкой. Вот ссылка с примерами на это для формы с избыточностью REDUX_FORM

...