test

import SearchPopup from '@/components/SearchPopup'
import { Input } from 'antd'
import React from 'react'
import { useState } from 'react'
import './index.scss'
const Transition = () => {
   const [isSearch,setIsSearch]=useState(false);
  return (
    <div className='container'>
        <div className='header'>
          <div>标题</div>
          //  input focus 事件
          <Input onFocus={()=>setIsSearch(true)}></Input>
          <div>end</div>
        </div>
        // 此处新加的 传入可以关闭弹框的方法
       {isSearch && <SearchPopup hidePopup={()=>setIsSearch(false)}></SearchPopup> }
    </div>
  )
}
export default Transition

components 里 SearchPopup 组件

import React, { useEffect,useRef } from 'react'
import {Input} from 'antd'
import './index.scss'
export default function SearchPopup(props) {
  const inputRef=useRef();
  const autoFocus=()=>{
    inputRef.current?.focus({cursor:'end'})
  }
  useEffect(autoFocus,[])
  return (
    <div className="popup-container" onClick={autoFocus}>
      <div className="masking" onClick={props.hidePopup}></div>
      <div className="popup-content">
        <Input ref={inputRef} />
        <div>tab</div>
      </div>
    </div>
  )
}

index.scss

.popup-container{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top:0;
  .masking{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top:0;
    opacity: 0;
  }
  .popup-content{
    position: relative;
    z-index: 3;
    width: 60%;
    margin: 0 auto;
    height: 80%;
    background-color: #ccc;
  }
}