当第一个输入值长度为 3 时，如何专注于下一个输入？

Question

我正在使用 formik，我有 2 个输入字段。

const initialValues = {
  name: '',
  other: ''
};

<Formik initialValues={initialValues}>
  <Form>
    <Field name="name" />
    <Field name="other" />
  </Form>
</Formik>

我想要实现的是当 name Field 中的值的长度为 3 时，名为 other 的 Field 获得焦点。

如何编写一个函数，名称字段值长度为 3，然后专注于其他字段？

Answer 1

你需要得到other字段的引用

--编辑

I see Field doesn't have onChange prop, but there is component which allows you to render specific input and attach onChange handler there

虽然看起来很糟糕

const otherRef = useRef(null);
// or this.otherRef = React.createRef(null)

const onChange = ({target: {value}}) => {
  if(value.length > 3) {
    otherRef.current.focus() // ideally you'd check before if otherRef is defined
  }
}

<Field onChange={onChange} name="name"
  component={({field: {onChange: onFormikChange, ...rest}, form, ...props}) => 
    <input {...rest} {...props} onChange={(event) => {onFormikChange(event);onChange(event)}} type="text"/>}
/>
<Field name="other"
  component={({field: {onChange: onFormikChange, ...rest}, form, ...props}) => 
    <input {...rest} {...props} ref={otherRef} onChange={(event) => {onFormikChange(event);onChange(event)}} type="text"/>}
/>