当前位置：网站首页>Antd form setting array fields

Antd form setting array fields

2022-07-19 11:24:00 【User 6256742】

In the use of React+ant design When developing, we usually use Form Components , But many times, one of our fields is a two-dimensional array . Such as this ：

export const searchOptionContext = atom({
  key: "article-list-option",
  default: {
    /**  Issued by   Administrator or user */
    auth: undefined,
    /**  Set positive or reverse order */
    sort: ["create_time", "desc"],// here 
    /**  Timeline , After querying so and so create_time The article */
    deadline: undefined,
    /**  according to ID The query */
    article_id: undefined,
    /**  Publisher ID*/
    author_id: undefined,
  },
});

But every form item There is only one field , How to set each element in a multidimensional array ？ After reading the document carefully, I found antd Provides a list Sub components to traverse the multidimensional array .

In development, we only need to take map You can traverse the multidimensional array ：

Conditional rendering by index value , Or define an array to use map Of index Parameters to render , No longer need conditional judgment . Use field Provided in key It's fine too , Is also an index value .

<Form.List name="sort">
  {fields =>
    fields.map((field, index) => (
      <Form.Item {...field} label={index == 0 ? " Sorting conditions " : " The rules "}>
        <Select value={option.sort[index]} style={{ width: "120px" }}>
          {index == 0 ? (
            <>
              <Option value="create_time"> Release time </Option>
              <Option value="update_time"> Update time </Option>
              <Option value="view_count"> Read the number </Option>
            </>
          ) : (
            <>
              <Option value="desc"> Descending </Option>
              <Option value="asc"> Ascending </Option>
            </>
          )}
        </Select>
      </Form.Item>
    ))
  }
</Form.List>
原网站

版权声明
本文为[User 6256742]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207171234082757.html

边栏推荐

猜你喜欢

随机推荐