1、单个
官网例子:打开
需要注意区分shouldUpdate
2、多个Form.List
<Form name="dynamic_form_nest_item" onFinish={ onFinish } autoComplete="off">
<Form.List name="users">
{ ( fields, { add, remove } ) => (
<>
{ fields.map( ( field ) => (
<Space
key={ field.key }
style={ { display: "flex", marginBottom: 8 } }
align="baseline"
>
<Form.Item
{ ...field }
name={ [ field.name, "name" ] }
fieldKey={ [ field.fieldKey, "name" ] }
dependencies={[["users", 0, "age"]]}
rules={ [
{
required: true,
message: "name"
}
] }
>
<Input placeholder="Name"/>
</Form.Item>
<Form.Item
{ ...field }
name={ [ field.name, "age" ] }
fieldKey={ [ field.fieldKey, "age" ] }
dependencies={[["users", 0, "name"]]}
rules={ [
{
required: true,
message: "age"
},
( { getFieldValue } ) => ( {
validator( _, value ) {
console.log( "name" );
if (
!value ||
getFieldValue( "users" )[field.fieldKey].name.length <
value.length
) {
return Promise.resolve();
}
return Promise.reject(
"the length of the name is less than the length of the age"
);
}
} )
] }
>
<Input placeholder="age"/>
</Form.Item>
<MinusCircleOutlined onClick={ () => remove( field.name ) }/>
</Space>
) ) }
<Form.Item>
<Button
type="dashed"
onClick={ () => add() }
block
icon={ <PlusOutlined/> }
>
Add field
</Button>
</Form.Item>
</>
) }
</Form.List>
</Form>
- 解释:
dependencies={[["users", 0, "name"]]}
users:Form.List的name
0:第几行
name:依赖的参数
参考链接:在线demo
链接1、来自github的issues
链接2、https://ant.design/components/form-cn/#dependencies