Динамическая настройка фокуса элемента реакции без функции стрелки

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?

ОБНОВЛЕНИЕ: НОВ. 5, 2019

Мне также нужно позже проверить в коде, находится ли ввод в фокусе, например, с помощью if (focusedElRef === input1Ref).

Я знаю, что эта оптимизация совершенно бесполезна,но мне все еще любопытно.

Спасибо!

Answer 1

Вы можете использовать только одну функцию onFocus и поддерживать только один текущий фокусированный элемент в состоянии:

Созданный пример:

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