ref.current.focus() 不是函数

Question

我试图在 onBlur 时使用 ref 来关注元素。我正在使用 react 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 />组件内部有一个输入元素。如果是这种情况，那么您必须使用forwardrefto pass down ref to child. 

Answer 2

我不知道你是否找到了答案，但我遇到了同样的双重问题。我使用的是类无状态组件，所以没有引用，这就是为什么我假设你收到错误为了解决这个问题，您需要添加一个 tabIndex 以便在 div（而不是输入元素）中设置焦点