自动对焦输入组件 Antd

Question

我正在尝试对位于 Drawer 组件上的 Input 组件进行自动对焦。我从 Antd 获取的所有组件。问题是自动对焦不会立即起作用，而是仅在 window 打开和关闭后才起作用。 Link 在 CodeSandbox 上 https://codesandbox.io/s/quizzical-morning-1nhi2v?file=/src/App.js

import './App.css';
import 'antd/dist/antd.css';
import {Button, Drawer, Input} from 'antd'
import React, { useState, createContext, useRef, useEffect } from 'react';

function App() {

  const  inputRef = useRef(true);
  const [visible, setVisible] = useState(false);

  const onClose = () =>{ //Close Drawer 
    setVisible(false);
  } 
  const open = () =>{ //Open Drawer and must be autofocus on Input
    setVisible(true);
  }
  useEffect(()=>{
    console.log(visible + 'useEffect');
    if(visible){
      inputRef.current.focus();
    }
  }, [visible])

  return (
    <div className="App">
      <Drawer visible={visible} onClose={onClose} autoFocus={true}>
        <Input ref={inputRef} ></Input>     
      </Drawer>     
      <Input ref={inputRef_}  ></Input>
      <Button onClick={open}>  Open</Button>
    </div>
  );
}

export default App;

Answer 1

你可以试试这个。我测试了并且有效。

if (visible) {
  setTimeout(() => {
    inputRef.current.focus();
  }, [500]);
}

自动对焦输入组件 Antd

Autofocus Input component Antd

javascript

reactjs

antd