在没有箭头功能的情况下动态设置 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？

更新：11 月。 2019 年 5 月 5 日

如果输入是焦点，我还需要稍后检查代码，例如使用 if (focusedElRef === input1Ref)。

我知道这个优化很不值，但我还是很好奇。

谢谢！

Answer 1

你可以只使用一个 onFocus 函数并且只保持一个当前焦点元素的状态：

创建示例：

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