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

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>

每个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()处理函数检查当前输入是否为最大长度。 如果是的话，请在react页面上的下一个ref输入上focus() 。

示例： jsfiddle.net/4np9u17g/11

---

您不需要任何类型的onBlur()函数，也无需具有代码即可通过单击Tab键来切换到下一个输入。 单击选项卡后，浏览器将自动专注于输入。

看来您在正确使用redux-form的Field -您已为电话号码的每个部分定义了一个单独的组件，因此您应为每个组件使用Field （如已完成）。 相反，如果您想将所有这些输入组合到一个组件中，则需要使用Fields 。 但是，就像你现在一样，你应该很好。