使用Antd4.x 的表单组件
-From
-From.List
实践
Form.List
实践(踩坑,避坑指南~~)
数据如下:
formData:{
nodeProcessingTimelen:1111,
remindMethods:[{status:1},{status:0}]
}
const [form] = Form.useForm()
const [, update] = useReducer(x => x + 1, 0)
<Form
form={form}
initialValues={formData}
>
<Form.Item name='nodeProcessingTimelen'>
<Input/>
</Form.Item>
<Form.List name="remindMethods">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }, idx) => (
<div>
<Form.Item
{...restField}
valuePropName="checked"
name={[name, 'status']}
>
<Switch
onChange={() => {
update() //
}}/>
{/*
失效:
1.<Switch />121
2.<Switch /><div></div>
3.<div> <Switch /></div>
*/}
</Form.Item>
<Typography.Link
disabled={!form.getFieldValue('remindMethods')
[key].status}>
</Typography.Link>
</div>
))}
</>
)}
</Form.List>
</Form>
-
Form.List
的children 是一个高阶函数
默认返回 fields包含name,key…,方法:add, remove, move -
Form.List
的name 要和form数据的循环数组字段一致 -
Form.Item
,name属性 一定要把fields.name 一起写上!name={[name, 'status']}
,否则也会失去默认值,form的双向绑定 - 里面循环的
Form.Item
只能存在一个 表单组件;如果有多余节点。默认值会失效
按照上面的写法Form.List
数据是可以回填回显的,form默认双向绑定
PS: 如果其他组件使用了 form的数据,例如上面的 组件 Link
的disable
属性和 <switch/>
联动, 可以使用 Form.useWatch hooks 监听;注意这 useWatch
在 4.20之后才有的hooks
在 4.20版本前 我的做法是通过 hooks -useReducer 强制更新视图
原文地址:https://www.jb51.cc/wenti/3282750.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。