react.js - React Antd Form 中如何批量创建和获取 Input 组件的 ref？

Question

antd,form中怎么用react获取多个input的ref?难道要一个一个创建useRef,然后给input吗?

有没有统一给form里面的所有控件创建ref，然后通过某个关键字获取相应input的ref

Answer 1

ref定义为一个表单控件名称->ref的映射

import { Form, Input, Radio } from 'antd';
import './App.css';
import { useEffect, useRef } from 'react';

function App() {
  const formControlRefs = useRef<Record<string, any>>({});

  useEffect(() => {
    console.log('formControlRefs: ', formControlRefs.current);
    console.log('username ref: ', formControlRefs.current['username']);
  }, []);
  return (
    <Form>
      <Form.Item name="username">
        <Input
          ref={(ref) => {
            formControlRefs.current['username'] = ref;
          }}
        />
      </Form.Item>
      <Form.Item name="bio">
        <Input
          ref={(ref) => {
            formControlRefs.current['bio'] = ref;
          }}
        />
      </Form.Item>
      <Form.Item name="gender">
        <Radio.Group
          ref={(ref) => {
            formControlRefs.current['gender'] = ref;
          }}
          options={[
            { label: '男', value: 1 },
            { label: '女', value: 2 },
          ]}
        />
      </Form.Item>
    </Form>
  );
}

export default App;

Logs:

stackblitz