css - 如何从一个文本字段更改为另一个文本字段

Question

我有 4 个文本字段，用于输入发送到手机的 4 位代码。如果写入数字并且不带数字以外的任何内容，我如何自动更改到下一个字段 我附上一张图片和我的代码库

// flow
import React, { useRef } from 'react';
import { signup } from '../../assets/images';
import FormDiv from '../shared/Sign-in-div';
import ImageDiv from '../shared/Image-div';
import { Nunito32, Nunito20 } from '../shared/nunito/nunito';
import ImageContainer from '../shared/image-container';
import OtpField from '../shared/otp-field';
import PinkButton from '../shared/button-color-pink';

let [fieldOne, fieldTwo, fieldThree, fieldFour] = useRef(null);

const onChange = field => {
  field.focus();
};

const SignUpVerification = () => (
  <div style={{ display: 'flex' }}>
    <FormDiv style={{ textAlign: 'center' }}>
      <Nunito32
        style={{
          display: 'inline-block',
          textAlign: 'center',
          marginRight: 236,
          marginLeft: 200,
        }}
      >
        Verify your mobile number by entering the code we sent you
      </Nunito32>
      <div style={{ flexDirection: 'row' }}>
        <OtpField
          ref={input => {
            fieldOne = input;
          }}
          style={{ marginRight: 10.5 }}
          onChange={() => onChange(fieldTwo)}
        />
        <OtpField
          ref={input => {
            fieldTwo = input;
          }}
          onChange={() => onChange(fieldThree)}
          style={{ marginRight: 10.5 }}
        />
        <OtpField
          ref={input => {
            fieldThree = input;
          }}
          onChange={() => onChange(fieldFour)}
          style={{ marginRight: 10.5 }}
        />
        <OtpField
          ref={input => {
            fieldFour = input;
          }}
          style={{ marginRight: 10.5 }}
        />
      </div>

      <PinkButton style={{ marginTop: 75 }}>Continue</PinkButton>
      <Nunito20>Send again</Nunito20>
    </FormDiv>
    <ImageContainer>
      <ImageDiv bg={signup} src={signup} alt="logo" />
    </ImageContainer>
  </div>
);

export default SignUpVerification;

它现在给我 2 个错误，fieldOne 已创建但未使用，并且 × 错误:无效 Hook 调用。钩子(Hook)只能在函数组件的主体内部调用。这可能由于以下原因之一而发生:

Answer 1

当你改变状态时重新渲染怎么样？