React：自动聚焦模态内的输入字段

Question

我使用Antd。我有由表单组成的模态窗口。当用户打开模式窗口时，我想关注输入字段。我如何在功能组件中做到这一点？我尝试了这个，但对我不起作用：

const EditForm = ({visible, widget, onSave, onCancel}) => {
  const nameInput = useRef();
  useEffect(() => nameInput.current && nameInput.current.focus());
  const [form] = Form.useForm();
   return (
    <div>
      <Modal
        visible={visible}
        title='Edit'
        okText='Save'
        cancelText='Cancel'
        onCancel={onCancel}
        onOk={() => {
          form
            .validateFields()
            .then(values => {
              form.resetFields();
              onSave(values);
            })
            .catch(info => {
              console.log('Validate Failed:', info);
            });
        }}
      >
        <Form
          {...formItemLayout}
          layout={formLayout}
          form={form}
        >
          <Form.Item />
          <Form.Item
            name='nameWidget'
            label='Name'
          >
            <Input name='nameWidget' ref={nameInput} onChange={handleChangeName} placeholder='Введите новое название' />
          </Form.Item>

        </Form>
      </Modal>
    </div>
  );
};

Answer 1

试试这个方法。 祝你好运;)

import React, {useState, useRef, useEffect}  from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Modal, Button, Input, Form } from 'antd';


const App = () => {
  const [visible, setVisible] = useState(false)
  const myRef = useRef();

  /*
   *  This is the main different
   */
  useEffect(()=>{
    if (myRef && myRef.current) {
      const { input } = myRef.current
      input.focus()
    }

  })
  const showModal = () => {
    setVisible(true)
  };

  const handleOk = e => {
    setVisible(false)
  };

  const handleCancel = e => {
    setVisible(false)
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal with customized button props
      </Button>
      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        okButtonProps={{ disabled: true }}
        cancelButtonProps={{ disabled: true }}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <Form>
          <Form.Item>
            <Input ref={myRef} />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('container'));

Answer 2

您实际上可以在不使用任何参考的情况下完成此任务。

首先，将

autoFocus

道具放在您的

Input

上。

<Input autoFocus name='nameWidget' ref={nameInput} onChange={handleChangeName} placeholder='Введите новое название' />

仅此还无法工作，因为 Ant Design 在应用程序的根 DOM 元素之外呈现模式对话框，这会妨碍 React 对

autoFocus

的处理。如果根元素是

<div id="app"></div>

按照惯例，您需要告诉 Ant 使用

getContainer

属性将 Modal 渲染到此元素中：

<Modal
  getContainer={document.getElementById('app')}
  // ...
>