.focus() 不是函数[关闭]

Posted 2023-02-22

【中文标题】.focus() 不是函数[关闭]

【英文标题】：.focus() is not a function [closed]

【发布时间】：2020-04-02 17:14:30

【问题描述】：

我一直试图将输入字段从一个更改为另一个无济于事，当我使用 .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  />
      </ImageContainer>
    </div>
  );
;

export default SignUpVerification;

有人可以帮忙吗？如果你知道更好的方法，我会很感激你带领我走上正确的道路

【问题讨论】：

fieldTwo.current.focus()?

你是最棒的

这能回答你的问题吗？ how react programmatically focus input

我还有一个问题：``` const fieldOne = React.createRef(); const fieldTwo = React.createRef();常量 fieldThree = React.createRef();常量 fieldFour = React.createRef(); ```我怎么能做到一句话？

【参考方案1】：

根据docs

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

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

【参考方案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()
          />

【讨论】：

我不知道如何在我自己的用例中实现它

用const field = React.useRef(null)替换const fieldOne = React.createRef();