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 store 中并且重置错误信息。如果你不希望传入对象被修改，请克隆后传入）。（不会触发校验）。 |
|
|
| 设置表单的值（该值将直接传入 form store 中并且重置错误信息。如果你不希望传入对象被修改，请克隆后传入） |
|
|
| 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 |
|
|
| 获取对应字段名的值 |
|
|
| 校验表单并返回所有字段值（校验失败会 reject）。 |
|
|
| 重置字段值（默认重置所有，可指定字段名）。 |
|
|
| 设置一组字段状态（如错误提示： |
|
|
| 获取一组字段名对应的错误信息，返回为数组形式 |
|
|
| 检查一组字段是否被用户操作过， |
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>11.DatePicker或RangePicker日期格式化:
使用 Form.Item 的 getValueFromEvent 和 getValueProps进行格式化:
import moment from 'moment';<Form.Itemname="tradingBenchmarkDate"label="违约基准日"getValueFromEvent={value => (value ? moment(value).format("YYYY-MM-DD") : null)}getValueProps={value => ({ value: value ? moment(value, "YYYY-MM-DD") : null })}
><DatePicker format="YYYY-MM-DD" />
</Form.Item><Form.Itemname="dateRange"label="日期范围"getValueFromEvent={(dates) => dates ? dates.map(date => moment(date).format('YYYY-MM-DD')) : null}getValueProps={(value) => ({value: value ? value.map(date => moment(date, 'YYYY-MM-DD')) : null})}
><RangePicker format="YYYY-MM-DD" />
</Form.Item>