React Antd Form 中如何批量创建和获取 Input 组件的 ref？-灵析社区
中年复健狗antd,form中怎么用react获取多个input的ref?难道要一个一个创建useRef,然后给input吗? 有没有统一给form里面的所有控件创建ref，然后通过某个关键字获取相应input的ref
CTang可以通过数据抽象一次性处理：
import React, { useEffect, useMemo } from 'react';
import { Form, Input, InputRef } from 'antd';
export function Demo() {
const inputRefs = useMemo>(() => new Map(), []);
const items = [
{
name: 'xxx',
},
{
name: 'yyy',
},
];
useEffect(() => {
console.log(inputRefs);
}, []);
return (
{items.map((item) => (
{
inputRefs.set(item.name, ref);
}}
/>
))}
);
}
如果组件结构差异比较大，没法通过数据统一，只能通过工具方法简化了：
import React, { useEffect, useMemo } from 'react';
import { Form, Input, InputRef } from 'antd';
export function Demo() {
const inputRefs = useMemo>(() => new Map(), []);
useEffect(() => {
console.log(inputRefs);
}, []);
const refCallback = (name: string) => {
return (ref: InputRef) => {
inputRefs.set(name, ref);
};
};
return (
);
}