无需箭头功能即可动态设置React元素焦点

Question

我目前有以下运行良好的代码：

import React, {
  RefObject,
  useReducer,
  useRef,
  useState
} from 'react';
import TextField from '@material-ui/core/TextField';

const MyComponent: React.FC = () => {
    const input1Ref = useRef<HTMLInputElement>(null);
    const input2Ref = useRef<HTMLInputElement>(null);
    const [focusedElRef, setFocusedElRef] = useState<RefObject<HTMLInputElement>>(startDateRef);

  return (
    <div>
      <TextField
        inputRef={input1Ref}
        autoFocus={true}
        onFocus={() => setFocusedElRef(input1Ref)}
      />
      <TextField
        inputRef={input2Ref}
        onFocus={() => setFocusedElRef(input2Ref)}
      />
    </div>
  )
}

有没有一种方法可以使用从onFocus方法自动返回的值来指示可以在另一个箭头函数中正确使用setFocusedElRef的输入引用？

更新：NOV。 2019年5月5日

例如，我稍后还需要通过使用if (focusedElRef === input1Ref)来检查代码中的输入是否处于焦点位置。

我知道这种优化是毫无价值的，但我仍然很好奇。

谢谢！

Answer 1

您只能使用一个onFocus函数，并且只能将一个当前关注的元素保持在状态：

创建的示例：

https://codesandbox.io/s/material-demo-73hmm