Antd中Form详解:

辣辣y

已于 2025-05-15 13:57:15 修改

阅读量1k

点赞数 23

文章标签：前端 react typescript

于 2025-05-13 14:52:28 首次发布

本文链接：https://blog.csdn.net/m0_66986239/article/details/147757627

版权

1.获取Form表单值的方式:

① 使用Form.useForm()钩子（推荐方式）

 const [form] = Form.useForm();

 const getFormValues = () => {
    const values = form.getFieldsValue();
 };

 <Form form={form}>
     ...
     <Form.Item  label={null}>
         <Button onClick={getFormValues}>获取值</Button>
     </Form.Item>  
 </Form>

② 类组件中使用ref

class MyForm extends React.Component {

  formRef = React.createRef();

  getFormValues = () => {
    const values = this.formRef.current.getFieldsValue();
  };
  
  render() {
    return (
      <Form ref={this.formRef}>
        ...
        <Form.Item label={null}>
           <Button onClick={this.getFormValues}>获取值</Button>
        </Form.Item>
      </Form>
    );
  }
}

③ 通过onFinish回调获取

<Form onFinish={(values) => console.log(values)}>
    ...
</Form>

2.Form.useForm和React.createRef的区别:

① 适用范围不同:

useForm是React Hook的实现,只能用于函数组件

createRef用来声明一个ref,可以在类组件中使用

② 获取表单值的方式不同:

useForm : form.getFieldsValue()

createRef : this.formRef.current.getFieldsValue()

3.Form.Item绑定两个值:

嵌套两层<Form.Item>,第一层无需绑定name属性,第二层绑定name,并设置样式display: "inline-block",让两个<Form.Item>在一行显示,如图所示

//在表单值中会得到:{orgCreditor: "123",orgCreditorShow: true}

<Form.Item<FieldType> label="委托方">
	<Form.Item name="consignor" style={{ display: "inline-block", width: "50%"}}>
		<Input />
	</Form.Item>

   <Form.Item name="consignorShow" valuePropName="checked" style={{ display: "inline- 
    block", width: "50%" }}>
	    <Checkbox>简称不显示在资产名称中</Checkbox>
   </Form.Item>
</Form.Item>

4.Form.Item绑定嵌套对象:

当 name 为数组时，会按照顺序填充路径。

<Form.Item name={["debtInfo", "name"]} label="债务人全称">
	<Input />
</Form.Item>

获取到的表单值 : debtInfo={name:"张三"}

回显赋值 :
方式一 : const debtInfo={name:"张三"}
         form.setFieldValue("debtInfo",debtInfo)

方式二 : form.setFieldValue(["debtInfo","name"],"张三")

5.Form表单校验:

①通过配置validateMessages自定义校验信息模板:

注:<1>输入框input/textArea应该加校验时机validateTrigger="onBlur",否则每输一次校验一次;

<2>scrollToFirstError提交失败自动滚动到第一个错误字段;

<3>email是框架自带的校验规则可直接使用,phone需要自定义校验规则

<4>复选框校验最多选择个数时,需指定type:"array",并在validateMessages的types中定义array提示消息

//自定义校验信息模板
const validateMessages = {
	required: "${label}不能为空",
    array: { max: "${label}最多选${max}个" },
    types:{
         email:"${label}格式不正确" 
    },
    pattern:{mismatch:"${label}格式不正确" }
};

<Form ... validateMessages={validateMessages}>
    <Form.Item<FieldType> label="机构" name="tenantId" rules={[{ required: true }]}>
		...
	</Form.Item>
    <Form.Item<FieldType> label="机构" name="tenantId" rules={[{ type: "array",max:3 }]}>
		<Checkbox.Group options={option} />
	</Form.Item>
    <Form.Item<FieldType> label="邮箱" name="email" rules={[{ type: "email"}]}>
		...
	</Form.Item>
    <Form.Item<FieldType> label="手机号" name="phone" rules={[{ pattern:/^1\d{10}$}]}>
		...
	</Form.Item>
</Form>

②直接在<Form.Item>上定义rules校验规则:

<Form.Item<FieldType> 
  label="机构"
  validateTrigger="onBlur" 
  name="tenantId" 
  rules={[{ required: true ,message:"机构不能为空"}]}>
	  <Input/>									
</Form.Item>

6.Form常用API:

方法	参数/返回值	说明
`form.setFieldsValue`	`(values: object) => void`	设置表单的值（该值将直接传入 form store 中并且重置错误信息。如果你不希望传入对象被修改，请克隆后传入）。（不会触发校验）。
`form.setFieldValue`	`(name:string,value:any ) => void`	设置表单的值（该值将直接传入 form store 中并且重置错误信息。如果你不希望传入对象被修改，请克隆后传入）
`form.getFieldsValue`	`(nameList?: string[]) => object`	获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 `getFieldsValue(true)` 时返回所有值
`form.getFieldValue`	`(name: string) => any`	获取对应字段名的值
`form.validateFields`	`() => Promise<values>`	校验表单并返回所有字段值（校验失败会 reject）。
`form.resetFields`	`(fields?: string[]) => void`	重置字段值（默认重置所有，可指定字段名）。
`form.setFields`	`(fields: FieldData[]) => voidstring`	设置一组字段状态（如错误提示：`{ name: 'field', errors: ['报错'] }`）。
`form.getFieldsError`	`(nameList?: string[]) => FieldError[]`	获取一组字段名对应的错误信息，返回为数组形式
`form.isFieldsTouched`	`(nameList?: string[],allTouched?:boolean) => boolean`	检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过

7.InputNumber常用属性:

controls : 是否显示增减按钮

precision : 数值精度,限制小数位数

max : 设置最大值(包含)

min : 设置最小值(包含),若最小值为0,则不允许输入负数

<Form.Item name="payment" label="已垫付律师费">
	<InputNumber controls={false} precision={2} max={200} min={0} />
</Form.Item>

8.select绑定对象:

在Select组件中添加labelInValue 属性,可以拿到选中节点的 label和value

<Form.Item<FieldType> label="选择资产包" name="packageData">
		<Select labelInValue options={packageList} fieldNames={{ label: "code", value: "id" }}></Select>
</Form.Item>

//获取到的值是 packageData:{key: 492,label:"1122222",value:492}

9.Form.Item的valuePropName属性:

Switch、Checkbox 的 valuePropName 应该是 checked，否则无法获取这个两个组件的值。

<Form.Item name="consignorShow" valuePropName="checked" >
	<Checkbox>简称不显示在资产名称中</Checkbox>
</Form.Item>

10.Cascader联级选择器的使用:

fieldNames:自定义 options 中 label,value,children 的字段

showSearch:在选择框中显示搜索框,支持模糊搜索

displayRender:选择后展示的渲染函数(不能在渲染过程中直接调用 setState,否则会报错)

onChange:(value, selectedOptions) => void,监听Cascader选择值的变化,在selectedOptions可以获取到选中值的label

import type { CascaderProps, GetProp } from "antd";
type DefaultOptionType = GetProp<CascaderProps, "options">[number];

//联级选择器选项
const options = [
		{
			id: 110000,
			name: "北京",
			children: [
				{
					id: 110100,
					name: "北京市",
					children: [
						{children: [],id: 110101,name: "东城区"},
						{children: [], id: 110102, name: "西城区" }
					]
				}
			]
		}
	];


//联级选择器模糊搜索
const filter = (inputValue: string, path: DefaultOptionType[]) =>
		path.some(option => (option.name as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1);

//选择后展示的渲染函数
const displayRender = (labels: string[]) => {
     return labels.join(" / ")
};

//获取选中值的label
const [creditorAreaDesc, setCreditorAreaDesc] = useState("");
const creditorAreaChange=(val: number[], option: AreaItem[])=>{
   if (option && option.length>0) {
		const str = option.reduce((pre, cur) => {
			return pre + "/" + cur.name;
		}, "");
		setCreditorAreaDesc(str);
    } else {
		setCreditorAreaDesc("");
	}
}

<Form.Item name="creditorArea" label="所在地">
		<Cascader
		   expandTrigger="hover"
		   fieldNames={{ label: "name", value: "id", children: "children" }}
		   options={options}
		   placeholder="请选择"
		   showSearch={{ filter }}
           displayRender={displayRender}
		   allowClear
           onChange={creditorAreaChange}
		/>
</Form.Item>

11.DatePicker日期格式化:

getValueFromEvent和getValueProps搭配使用:

<Form.Item<FieldType>
	name="tradeDate"
	label="违约基准日"
	getValueFromEvent={(...[, date]) => date}
	getValueProps={value => {return { value: value ? dayjs(value, "YYYY-MM-DD HH:mm:ss") : undefined }}}
>
		<DatePicker format="YYYY-MM-DD HH:mm:ss"  />
</Form.Item>


<Form.Item<FieldType>
	name="tradeDateRange"
	label="交易日期范围"
	getValueFromEvent={(...[, date]) => date}
	getValueProps={data => {
	const value = data && data.length > 0 && data.map((item: string) => dayjs(item, "YYYY-MM-DD"));
		return value;}}
>
	  <RangePicker format="YYYY-MM-DD" />
</Form.Item>