.focus()不是函数

Question

我一直在尝试将输入字段从一个字段更改为另一个字段，但没有效果，当我使用.focus时，它给我一个错误，它不是一个函数。

我将粘贴我的代码

import React, { useEffect } 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';

const SignUpVerification = () => {
  const fieldOne = React.createRef();
  const fieldTwo = React.createRef();
  const fieldThree = React.createRef();
  const fieldFour = React.createRef();

  return (
    <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={fieldOne}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldTwo.focus()}
          />
          <OtpField
            ref={fieldTwo}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldThree.focus()}
          />
          <OtpField
            ref={fieldThree}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldFour.focus()}
          />
          <OtpField
            ref={fieldFour}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldFour.focus()}
          />
        </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;

有谁能帮帮我吗？如果你知道更好的方法，我将非常感谢你引导我走上正确的道路

Answer 1

根据docs的说法

将ref传递给render中的元素时，可以在ref的当前属性中访问对节点的引用。

所以试着使用field.current.focus()

Answer 2

既然你有一个功能组件，你就应该使用useRef。createRef将在每次渲染时创建一个新引用。

https://reactjs.org/docs/hooks-reference.html#useref

此外，引用还将公开一个属性current，您必须使用该属性来设置焦点。

const fieldOne = useRef(null);
...
          <OtpField
            ref={fieldOne}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldTwo.current.focus()}
          />
          <OtpField
            ref={fieldTwo}
            style={{ marginRight: 10.5 }}
            onChange={() => fieldThree.current.focus()}
          />