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

Question

在 React 中有一个搜索栏，它会在我单击“打开”按钮后显示。搜索栏显示流畅，因为我使用了 translateX 属性。然后我想在此搜索栏中的输入元素上使用 focus() 。我尝试使用参考文献。焦点出现，但只要我按下按钮它就会出现，并一直保持搜索栏从屏幕的一部分移动到另一部分（记住，这是因为我使用了 translateX）。所以这一切都在我眼前。如何让焦点出现在屏幕上的搜索栏 'reached the destination' 之后？我试过了

  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 >
     )

Answer 1

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

类似这样的东西，（未测试）。

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 >
     )

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

How to set focus to input after the element stops moving?

reactjs

focus