Antd中Form详解:

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提交失败自动滚动到第一个错误字段;

//自定义校验信息模板
const validateMessages = {required: "${label}不能为空"
};<Form ... validateMessages={validateMessages}><Form.Item<FieldType> label="机构" name="tenantId" rules={[{ required: true }]}>...</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,否则会报错)

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[]) => {// labels 就是选中的 label 数组return labels.join(" / ")
};<Form.Item name="creditorArea" label="所在地"><CascaderexpandTrigger="hover"fieldNames={{ label: "name", value: "id", children: "children" }}options={options}placeholder="请选择"showSearch={{ filter }}displayRender={displayRender}allowClear/>
</Form.Item>