Реагируйте Собственная, избыточная форма, нативная база - функция onChange (событие) не работает, undefined не является объектом, оценивающим event.target.value

Question

ИЗМЕНЕНО, ЕЩЕ НЕТ ОТВЕТА Я последовал этому примеру: https://jsfiddle.net/4np9u17g/11/ Я хочу сделать так, как там - после ввода значения фокус должен перейти к следующему вводу.Я использую новый синтаксис ссылок и форм редуксов, что я делаю не так?

  constructor() {
    super();
    this.field1 = React.createRef();
    this.field2 = React.createRef();
    this.field3 = React.createRef();
    this.field4 = React.createRef();
    this.field5 = React.createRef();
    this.field6 = React.createRef();
  }

Функция изменения (пока я сделал это очень просто):

 onChange = (text) => {
   if (text.length === 1) {
    this.field3.focus();
}

};

Компонент ввода:

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

И, наконец, одно из моих полей формы избыточного числа:

 <Field
    maxLength={
    id="2"
    ref={this.field1}
    style={styles.input}
    name="pinSix1"
    component={this.InputComponent}
    placeholder="*"
    onChange={this.onChange}
    secureTextEntry
  />
  <Field
    id="3"
    ref={this.field2}
    style={styles.input}
    name="pinSix2"
    component={this.InputComponent}
    placeholder="*"
    onChange={this.onChange}
    secureTextEntry
  />

И я получаю сообщение об ошибке

undefinedне является функцией (оценивает '_this.field3.focus ()')

Answer 1

Окей, после нескольких часов борьбы вот что я должен был сделать (как я уже сказал, я использую новый синтаксис ссылок, Реакт 16.3).Я создал InputComponent с ref, переданным как props:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Input } from 'native-base';

class InputComponent extends PureComponent {
  static navigationOptions = {
    header: null,
  };

  render() {
    const { input, externalRef, ...rest } = this.props;
    return (
      <Input
        {...rest}
        ref={externalRef}
        keyboardType="numeric"
        maxLength={1}
        value={input.value}
        onChangeText={input.onChange}
      />
    );
  }
}

InputComponent.propTypes = {
  input: PropTypes.object,
  externalRef: PropTypes.object,
};

export default InputComponent;

Затем в моем компоненте, где реализованы вводы пин-кода:

constructor() {
    super();
    this.field0 = React.createRef();
    this.field1 = React.createRef();
    this.field2 = React.createRef();
    this.field3 = React.createRef();
    this.field4 = React.createRef();
    this.field5 = React.createRef();
  }

  componentDidMount() {
    this.field0.current._root.focus();
  }

  onChange = (text, val, body, name) => {
    if (text.length === 1 && name !== '6') {
      this[`field${name}`].current._root.focus();
    } else if (text.length === 1 && name === '6') {
      this.field5.current._root.blur();
    }
  };

Проблема здесь заключалась в том, что этот ужасный NativeBase Input имелтрудно получить доступ к функциям focus () и blur ().Наконец - одно из моих шести полей:

<Field
   externalRef={this.field0}
   style={styles.input}
   name="1"
   component={InputComponent}
   placeholder="*"
   onChange={this.onChange}
   secureTextEntry
 />

Прямо сейчас, когда пользователь вводит некоторые числа, он переходит к следующему вводу и когда он или она вводит в последнее поле, запускается функция blur ().

Answer 2

onChangeText () из TextInput вызывается с текстовой строкой, которая вводится в это поле ввода, а не с объектом события

Edit Чтобы ответить на ваш вопрос о том, как с этим справиться.Вам нужно будет отредактировать ваш обработчик onChange:

onChange = (text) => {
  if (text.length === this.maxLength /* or wherever maxLength comes from */ ) {
    this.refs[nextField].focus()
  }
};

Где nextField - имя следующего ввода, которое вы предоставляете через ref prop

Вы также можете увидеть этот SOсообщение для получения дополнительной информации: