Как перейти от одного поля к другому (без использования TAB) в Redux-form 6?

Question

У меня есть форма с тремя полями, которые составляют ввод номера телефона. Это выглядит примерно так:

<form> 
    <Field id="areaCode" name="areaCode" component={areaCode} max={3} type="text" /> 
    <Field id="firstThree" name="firstThree" component={firstThree} max={3} type="text" /> 
    <Field id="lastFour" name="lastFour" component={lastFour} max={4} type="text" /> 
</form> 

component для каждого Field выглядит следующим образом (они похожи, так что я просто покажу один, чтобы проиллюстрировать мою точку зрения)

const areaCode = (field) => (
     <input 
      {...field.input} 
      maxLength={field.max} 
      type="text" 
      onChange={(value) => { 
       // switch to next field (firstThree) 
       // after this field's length is >= 3 
      }} 
     /> 
) 

Я хочу, чтобы автоматически переключаться на второе поле после ввода пользователем трех чисел в первом поле. Как можно перейти к следующему полю программно?

Я не уверен, как ссылаться на второе поле в форме, чтобы переключиться, когда они размываются от первого поля.

Я делаю это правильно? Должен ли я использовать Fields вместо Field?

Answer 1

Редактировать: Чтобы автоматически переключаться на следующее поле при достижении максимальной длины, вы можете использовать onChange() и ref. Обработчик onChange() проверяет, имеет ли текущий вход максимальную длину. Если это так, focus() на следующем ref 'd введите на свою страницу реакции.

Пример: jsfiddle.net/4np9u17g/11

---

Вам не нужно каких-либо onBlur() функции или иметь код для обработки перехода к следующему входу при нажатии вкладки. Браузер автоматически сфокусируется на входе при нажатии вкладки.

Похоже, вы правильно используете Field в качестве редукционной формы - вы определили отдельный компонент для каждой части номера телефона, поэтому для каждого компонента (как вы уже сделали) вы должны использовать Field. Если вместо этого вы захотите объединить все эти входы в один компонент, тогда вам нужно будет использовать Fields. Но, как вы сейчас, вы должны быть хорошими.