Reactjs 如何在元素停止移动后将焦点设置为输入？

在React a中，有一个搜索栏，在我单击“打开”按钮后显示。搜索栏显示平滑，因为我使用了translateX属性。然后我想在这个搜索栏的输入元素上使用focus（）。我试着用裁判。焦点会出现，但只要我按下按钮，它就会出现，并一直保持搜索栏从屏幕的一个部分移动到另一个部分（请记住，因为我使用translateX）。所以这一切就在我眼前发生了。如何在屏幕上搜索栏“到达目的地”后显示焦点？我试过了

  if (props.visibleSearchBar) {
    ReactDOM.findDOMNode(inputRef.current).focus()
  } 

而不是

 if (props.visibleSearchBar) {
      inputRef.current.focus();
  } // same story


 const Search = (props) => {
     let inputRef = useRef(null);       
     if (props.visibleSearchBar) {
          inputRef.current.focus();
       }

     return (
       <div>
        <input ref={inputRef} />   
       </div >
     )

if（道具可见搜索栏）{
inputRef.current.focus（）；
}//同样的故事
常量搜索=（道具）=>{
让inputRef=useRef（null）；
if（道具可见搜索栏）{
inputRef.current.focus（）；
}
返回(
)

您可以先禁用输入，然后在转换结束后启用

类似这样的东西，（它没有经过测试）

const[disabled，setDisabledState]=useState（true）
useffect（（）=>{
常量回调=（）=>{
setDisableState（错误）
inputRef.current.focus（）；
}
inputRef.current.addEventListener（'transitionend'，回调）
return（）=>inputRef.current.removeEventListener（'transitioned'，回调）
}, [])
返回(
)

很好！成功了！顺便说一句，你忘了在“transitionend”一词中添加“n”。我还添加了另一个布尔状态，以阻止此转换n以不友好的方式发生。非常感谢！

const [disabled, setDisabledState] = useState(true)

useEffect(() => {
const callback = () => {
 setDisableState(false)
 inputRef.current.focus();
}
inputRef.current.addEventListener('transitionend', callback)

return () => inputRef.current.removeEventListener('transitioned', callback)
}, [])


 return (
       <div>
        <input ref={inputRef}  disabled={disabled}/>   
       </div >
     )