reactjs 嵌套对象的Ant设计多选

slmsl1lt  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(150)
    • bounty将在7天后过期**。回答此问题可获得+50声望奖励。Konstantin Bodnia希望引起更多人对此问题的关注:我真的需要解决这个问题

我正在使用refine.devAntDesign构建一个 Jmeter 板。
我的一个实体具有多对多关系,该关系在API中作为具有id属性的对象数组返回。

{
  "id": 1,
  "relations": [
    {
      "id": 1
    },
    {
      "id": 2
    }
  ]
}

我需要建立一个具有"多选"组件的表单。我遵循了这个教程。但不幸的是,它只有"多对一"关系的示例。
首先生成selectProps,这部分没问题。

const { selectProps: relationsSelectProps } = useSelect<Relation>({
  resource: 'relations',
  optionLabel: 'name',
  defaultValue: record?.relations.map((r) => r.id),
});

问题就来了。当我试图创建一个表单项时

<Form.Item
  name={['relations']}
>
  <Select
    mode="multiple"
    {...relationsSelectProps}
  />
</Form.Item>

我不能让它与多个嵌套对象一起工作。
我尝试了不同的名称路径:['relations', 'id']['relations', '*', 'id']
尝试玩弄normalize属性。
我并不想在后端展平这些对象,所以问题是:在项目的响应端,使其工作的最佳实践是什么?

gupuwyp2

gupuwyp21#

因此,第一部分是关于如何尝试设置表单项以与模型保持一致。
Form.Item上带有{[something,child-of-somthing]}的“名称”基本上是点符号
假设我有一个模型,其中包含一个关系,例如

export interface ISubscription {
  id: number;
  sku: string;
  customer: ICustomer
}

而IC客户看起来像这样

export interface ICustomer {
      id: number;
      name: string;
      surname:: string;
    }

设置Form.Item时,可以使用{[]}获取嵌套值,如

<Form.Item
     label="Customer"
     name={["customer", "name"]}
     >
      <Input />               
    </Form.Item>

其次,当你超越了refine.dev的基本用例时,使用antd进行多重选择会更加复杂。
我不是100%肯定与您的用例,但例如,当我不得不作出多个选择与自定义标记在它。

<Form.Item label="Custom Tags">
  <Select
    mode="multiple"
    value={customTags}
    onSelect={handleSelect}
    onDeselect={handleDeselect}
  >
    {customTagOptions}
  </Select>
</Form.Item>

但您需要创建与此类似的自定义选项

const customTagOptions = useMemo(() => {
    return tagDataResult?.data
      ?.map(
        // build an array with the id and label for the select option
        (t) => ({ id: t.id, label: `${t.tagType.name} : ${t.name}` })
      )
      .sort(
        // then sort everything
        (a, b) =>
          a.label.localeCompare(b.label, undefined, { sensitivity: "base" })
      )
      .map(
        // then build the final options
        (t) => (
          <Option key={t.id} value={t.id} title={t.label}>
            {t.label}
          </Option>
        )
      );
  }, [tagDataResult?.data]);

因为是的,蚂蚁D和精炼组合赢了; Don“不要让你做你想做的事情。你在这里有点与框架作斗争。
希望这对你有点帮助

相关问题