[React] Antd Form.List 的基本使用-CSDN博客

本文链接：https://blog.csdn.net/iChangebaobao/article/details/124631075

本文介绍了Ant Design中Form.List组件的基本用法，用于管理数组形式的表单字段。通过示例展示了如何添加和移除表单项，以及配置用户填写信息的标题。数据结构为infoList，包含中文和英文标题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[React] Antd Form.List 的基本使用

Form.List 为字段提供数组化管理。

官网：https://ant.design/components/form-cn/#Form.List

<Form.List name='infoList'>
 {(fields, {add, remove}) => (
    <>
      <FormItem>
        {gettext('用户填写信息')}
        <Button
          type='primary'
          style={{marginLeft: '20px'}}
          ghost
          disabled={!canEdit}
          shape='circle'
          onClick={() => add()}
        >
          +
        </Button>
      </FormItem>
      <FormItem>
        <div style={{color: '#999'}}>{gettext('请在下方输入框中配置用户需要填写的信息标题，如手机号码')}</div>
      </FormItem>
      {fields.map(({key, name, ...restField}) => (
        <div className='infoItem' key={key}>
          <div className='removeBtn'>
            <Button danger ghost shape='circle' disabled={!canEdit} onClick={() => remove(name)}>
              -
            </Button>
          </div>
          <FormItem label={gettext('中文标题')} name={[name, 'info']} required rules={utils.form.setRules()}>
            <Input disabled={!canEdit} placeholder={gettext('请输入中文标题')} />
          </FormItem>

          <FormItem label={gettext('英文标题')} name={[name, 'infoEn']} required rules={utils.form.setRules()}>
            <Input disabled={!canEdit} placeholder={gettext('请输入英文标题')} />
          </FormItem>
        </div>
      ))}
    </>
  )}
</Form.List>

页面样式：

在这里插入图片描述

数据结构：

infolist: [
	{info:'姓名'，infoEn:'Name'},
	{info:'邮箱'，infoEn:'Email'},
]

在这里插入图片描述