如何在 Redux-form 6 中从一个字段转到下一个字段（不使用 TAB）？

Question

我有一个包含三个字段的表单，这些字段构成了一个 phone 数字输入。它看起来像这样：

<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>

每个 Field 的 component 看起来像这样（它们很相似所以我只展示一个来说明我的观点）

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

我想在用户在第一个字段输入3个数字后自动切换到第二个字段。如何以编程方式切换到下一个字段？

我不确定如何引用表单中的第二个字段以在它们从第一个字段模糊时切换到。

我这样做对吗？我应该使用 Fields 而不是 Field 吗？

Answer 1

编辑：要在达到 maxLength 时自动切换到下一个字段，您可以使用 onChange() 和 ref。 onChange() 处理程序检查当前输入是否达到最大长度。如果是，focus() 在您的 React 页面上的下一个 ref 输入。

示例：jsfiddle.net/4np9u17g/11

您不需要任何类型的 onBlur() 函数或代码来处理在单击选项卡时切换到下一个输入。浏览器会在点击标签时自动聚焦输入。

看起来你正确地使用了 redux-form 的 Field - 你已经为 phone 数字的每个部分定义了一个单独的组件，所以你应该为每个部分使用 Field组件（正如您已经完成的那样）。相反，如果您想将所有这些输入组合到一个组件中，则需要使用 Fields。不过，像你现在这样，应该好好的吧。

如何在 Redux-form 6 中从一个字段转到下一个字段（不使用 TAB）？

How do I go from one field to the next (without using TAB) in Redux-form 6?

javascript

reactjs

redux

redux-form