动态设置React元素焦点而无需使用箭头功能

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

abstract class Tab<T> {}

有没有办法使用从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

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

例如,我还需要稍后通过使用setfocusedElRef来检查代码中输入的焦点。

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

谢谢!

wdiaoniena 回答:动态设置React元素焦点而无需使用箭头功能

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

创建的示例:

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

本文链接:https://www.f2er.com/3166818.html

大家都在问