首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >antd表单设置数组字段

antd表单设置数组字段

作者头像
用户6256742
发布2022-07-17 12:24:02
2.1K0
发布2022-07-17 12:24:02
举报
文章被收录于专栏:网络日志网络日志

在使用React+ant design进行开发时通常使用Form组件,但是很多时候我们某一个字段是二维数组。例如这样:

export const searchOptionContext = atom({
  key: "article-list-option",
  default: {
    /** 发布人 管理员或者用户*/
    auth: undefined,
    /** 设置正序还是倒序*/
    sort: ["create_time", "desc"],//这里
    /** 时间线,查询某某之后create_time的文章*/
    deadline: undefined,
    /** 根据ID进行查询*/
    article_id: undefined,
    /** 发布者ID*/
    author_id: undefined,
  },
});

但是表单每个item只对应了一个字段,怎么对多维数组中的每个元素进行设置呢?在仔细阅读文档后发现antd提供了一个list子组件来遍历多维数组

填坑,React
填坑,React

在开发中只需要采取map对多维数组进行遍历即可:

通过索引值进行条件渲染,或者定义一个数组使用map的index参数进行渲染,不在需要条件判断。使用field中提供的key也可以,也是索引值。

<Form.List name="sort">
  {fields =>
    fields.map((field, index) => (
      <Form.Item {...field} label={index == 0 ? "排序条件" : "规则"}>
        <Select value={option.sort[index]} style={{ width: "120px" }}>
          {index == 0 ? (
            <>
              <Option value="create_time">发布时间</Option>
              <Option value="update_time">更新时间</Option>
              <Option value="view_count">阅读数</Option>
            </>
          ) : (
            <>
              <Option value="desc">降序</Option>
              <Option value="asc">升序</Option>
            </>
          )}
        </Select>
      </Form.Item>
    ))
  }
</Form.List>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-07-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档