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

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

1. 我使用的是类无状态组件，所以没有引用，这就是为什么我假设你收到错误

2. 为了解决这个问题，您需要添加一个 tabIndex 以便在 div（而不是输入元素）中设置焦点