antd中的Form、FormItem、FormList、FormList + Table详解

Form是高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。

一、Form

1、初始化

// 实例初始化
type Form.useForm = (): [FormInstance] // FormInstance是Form实例，相当于一个hooks
const [form] = Form.useForm();

// 初始化值；
const initialValues = {
   
        name: 'zhangsan',
        age: '19',
    }
// render
<Form form={
   form} initialValues={
   initialValues}></Form>

initialValues：注意值只会初始化的时候生效，后续修改initialValues或者setState不会让表单显示最新数据；修改值使用form.setFieldsValue

2、监听字段并且响应式

// name字段值被修改，会触发组件更新(nameState所在的组件)
const nameState = Form.useWatch('name', form) 

form.setFieldsValue会更新form组件实例，但是不会更新父组件；useWatch可以触发父组件更新

3、常用属性

labelCol、wrapperCol、onFieldsChange、onFinish、onFinishFailed、onValuesChange

// labelCol、wrapperCol
const labelCol = {
   
	span: 8, // label占用格数，24分制；
}
const wrapperCol = {
   
	span: 8, // content占用格数，24分制；
	offset: 8, // 左侧的间隔格数；当你有一个Item不想展示label，又想对齐，可以使用
}
// onFieldsChange 修改字段触发
onFieldsChange：function(changedFields, allFields)
字段修改会触发三次，值修改，校验规则中，校验结束
Trigger value change
Rule validating
Rule validated

// onFinish 表单事件提交以后并校验成功回调
Form中需要配合htmlType='submit'原生属性触发
<Button type='primary' htmlType='submit' >Submit</Button>
// onFinishFailed 表单事件提交以后并校验失败回调

// onValuesChange 修改字段触发
function(changedValues, allValues) // changedValues是修改的那一个字段，allValues是所有数据

4、实例属性

• getFieldsValue、getFieldValue、setFieldsValue、setFieldValue、resetFields、validateFields、submit
• getFieldsValue只会获取值存在的字段，如果所有值都没有填写，返回空对象；onValuesChange、validateFields会返回所有字段的数据对象，如果字段没有填写，字段值为undefined

// getFieldsValue
// 获取所有已经渲染的字段的值
const formValues = form.getFieldsValue(); 
// true 表示获取所有值，包括setFieldsValue所有的值（有时候数据回显，设置了多余数据）
const formValues = form.getFieldsValue(true); 

// getFieldValue 获取单个字段属性值，
// 获取数据function：((form: FormInstance) => RuleConfig)
// getFieldValue常在FormItem的function获取数据时使用

// setFieldsValue
form.setFieldsValue() // 设置表单值，key对应值的覆盖；可以设置多个字段值
setFieldsValue({
    [key]: 'newValue' })

// setFieldValue: (name: NamePath, value: any) => void
单个字段值设置
type NamePath = string | number | (string | number)[]
setFieldValue('name', 'name');
setFieldValue(9, 'name'); // 注意数字和字符串是区分的
setFieldValue(['listName', 0, 'name'], 'name'); // 修改Form.List 中单项值比较方便

// form.resetFields() 会让表单回到初始状态; 会导致父组件更新（Form实例初始化的那个组件）

// form.validateFields() 表单全部校验
// form.validateFields([NamePath]) 部分校验
// form.validateFields(['name', 'age', 9]) 校验多个字段
// 配置Promise trycatch 避免报错（有一些error会被埋点捕获，尽量使用trycatch ）
const onSubmit = async(values) => {
   
    try {
   
        const res = await form.validateFields()
        console.log('validateFields success', res)
    } catch (error) {
   
        console.log('validateFields error', error)
    }
}

// form.submit()  // 与点击 submit 按钮效果相同(htmlType='submit')

简要例子

const Case = () => {
   
    const [form] = Form.useForm();
    const name = Form.useWatch('name', form)
    const initialValues = {
   
        name: 'zhangsan',
        age: '19',
    }
    const onSubmit = async (values) => {
   
	    try {
   
	        const res = await form.validateFields()
	        console.log('validateFields success', res)
	    } catch (error) {
   
	        console.log('validateFields error', error)
	    }
	}
    return (
        <>
            <Button>{
   name}</Button>
            <Form
	            form={
   form}
	            initialValues={
   initialValues}
            	labelCol={
   {
    span: 6 }}
            	wrapperCol={
   {
    span: 14 }}
            >
                <Form.Item name='name' label='name'><Input /></Form.Item>
                <Form.Item name='age' label='age'><Input /></Form.Item>
                <Form.Item wrapperCol={
   {
    offset: 6, span: 14 }}