ref.current.focus() 不是函数

Question

我试图在 onBlur 时使用 ref 来聚焦元素。我正在使用反应 v.16.9.0 我的代码是这样的：

const handleKeyDown = (e, element, index) => {
  element.current.focus();
  event.preventDefault();
};

const pinDigitBuilder = () => {
  const arr = Array(...Array(TOTAL_PIN_DIGITS));
  return arr.map((x, i) => {
    const inputRef = useRef(null);
    console.log(inputRef);
    return (
      <Field
        key={`${PIN_DIGIT}${i + 1}`}
        id={`${PIN_DIGIT}${i + 1}`}
        name={`${PIN_DIGIT}${i + 1}`}
        ref={inputRef}
        component={InputTextField}
        className="text xxs2"
        classNameInvalid="text xxs2 error"
        type="text"
        divClassName="fieldWrap"
        maxLength={1}
        normalize={keepNumbersOnly}
        errorStyle={{ display: 'none' }}
        autoComplete="off"
        onBlur={(e) => { handleKeyDown(e, inputRef, i); }}
      />
    );
  });
};

当我在字段外单击时出现错误，提示 element.current.focus();。我不明白。我按照文档中的详细说明使用 useRef，但我不知道我缺少什么。有什么想法吗？

Answer 1

我假设 <Field /> 是一个功能组件。在 <Field /> 组件内部有一个输入元素。如果是这种情况，那么您必须使用 forwardref 将 ref 传递给 child。这里是参考link

https://reactjs.org/docs/forwarding-refs.html.

Answer 2

我不知道你是否找到了答案，但我遇到了同样的问题，但有一个双重问题。

我使用的是 class 无状态组件，所以没有引用，这就是为什么我假设你收到错误 ()
为了解决这个问题，您需要添加一个 tabIndex 以便在 div（不是输入元素）中设置焦点 (Is it possible to focus on a <div> using JavaScript focus() function?)

ref.current.focus() 不是函数

ref.current.focus() is not a function

javascript

focus

refs

reactjs