antd-design的modal的input获取焦点的问题

wwwwwllllk

我要实现的是打开model时候要获取input的焦点。

已经找了解决方法。
方案

 setIsModalOpen(true);
    setTimeout(() => {
      inputRef.current && inputRef.current.focus()
    }, 0);

但是我困惑的一个点是,下面的写法我感觉第一次会获取不到焦点，但是以后每一次都是可以拿到input的焦点的，但是页面就是没有显示获取到焦点。不知道是哪里的问题

 setIsModalOpen(true);
 inputRef.current && inputRef.current.focus()

写到useEffect里面也不可以

import React, { useState,useRef, useEffect } from 'react';
import { Button, Modal, Input } from 'antd';
function MyModel() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const inputRef = useRef(null);
  const showModal = () => {
    setIsModalOpen(true);
    inputRef.current && inputRef.current.focus()
  };

  useEffect(() => {
    console.log(isModalOpen)
    if(isModalOpen){
      // console.log(1)
      // inputRef.current && inputRef.current.focus()
    //   setTimeout(() => {
    //   inputRef.current && inputRef.current.focus()
    // }, 0);

    }
  }, [isModalOpen])

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal title="测试model里面的input获取焦点" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Input ref={inputRef} autoFocus/>
        <Button onClick={()=>{
          inputRef.current.focus()
        }}>点击</Button>
      </Modal>
    </>
  );
}

export default MyModel