antd-design的modal的input获取焦点的问题
!(data/attachment/forum/202211/09/204618dyzxmkmyveejzeyf.png)我要实现的是打开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 = 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);
}
}, )
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
```
页:
[1]