我使用：
并且我已经创建了一个Ant Design ，其验证无法正常进行，因为我在功能组件中拥有该验证。
我要实现的目标：
现在，我想在功能组件中使用Form.Item。
我看到useRef / useCallback可以帮助实现此目的而无需创建经典的类组件。
我当前的方法如下：
import React, { useState, useCallback } from 'react';
import {
Checkbox,
Form,
Select,
message,
} from 'antd';
const { Option } = Select;
const newMultiSelectInput = ({
id,
label,
msgs,
data,
selectMode,
flags,
form,
}) => {
const [formRef, setFormRef] = useState(null);
const saveFormRef = useCallback((node) => {
if (node !== null) {
setFormRef(node);
}
}, []);
const handleSelect = (value, { pForm, inputID, availableOptions }) => {
console.log(`${pForm} ${inputID}`);
console.log(availableOptions);
formRef.validateFields();
};
const isRequiredField = Object.prototype.hasOwnProperty.call(flags, 'required') ? flags.required : true;
const [selectionMode, setSelectionMode] = useState(selectMode && selectMode.length ? selectMode : 'multiple');
return (
<Form.Item
label={label}
hasFeedback
id={id}
name={id}
rules={[{ type: 'array', required: isRequiredField, message: msgs.validation }]}
>
<Select ref={saveFormRef} allowClear onSelect={(e) => { handleSelect(e, { form, id, availableOptions: data }); }} notFoundContent={null} mode={selectionMode} placeholder={msgs.placeholder}>
{data
? data.map((el) => (
<Option value={el} key={el}>
<span>{el}</span>
</Option>
))
: null}
</Select>
</Form.Item>
);
};
export default newMultiSelectInput;
通话如下：
newMultiSelectInput({
flags: {
required: true,
},
id: 'test',
label: 'test',
msgs: {
validation: 'Error - Please fill out values !',
placeholder: 'Please fill out the testbox.',
},
data: ['A', 'B', 'C'],
form,
})
表单是通过以下方式创建的：
const [form] = Form.useForm();
有人可以帮忙吗？