微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何将反映 ReferenceArrayInput 当前状态的 Datagrid 添加到 react-admin 编辑表单?

如何解决如何将反映 ReferenceArrayInput 当前状态的 Datagrid 添加到 react-admin 编辑表单?

我正在使用 react-admin 编写用户管理,并尝试更轻松地将用户添加到群组,即使用自动完成功能用户编辑页面添加群组。从一个例子开始,我使用以下方法取得了一些成功:


   <ReferenceArrayInput
      label="Group"
      source="groups"
      reference="groups"
   >

    <AutocompleteArrayInput
        {...props}
        resettable={true}
        allowEmpty={true}
        optionText="name"
        fullWidth
    />

   </ReferenceArrayInput>

但是,此方法使用 Chip 组件内联显示所选项目。我想改用 Datagrid。我从源代码中知道我无法覆盖自动完成的显示部分(还没有?),所以我想我可以通过 CSS 隐藏 Chip,但我仍然需要一种方法显示Datagrid 与当前选择。所以我尝试了这个(它被包裹在 FormWithRedirect 中,因此是 formProps):

    <ReferenceArrayField
        {...formProps}
        label="Group"
        source="groups"
        reference="groups"
    >
        <Datagrid>
            <TextField source="name" />
        </Datagrid>
    </ReferenceArrayField>
    <ReferenceArrayInput
        {...formProps}
        label="Group"
        source="groups"
        reference="groups"
    >
        <AutocompleteArrayInput
            resettable={true}
            allowEmpty={true}
            optionText="name"
            fullWidth
        />
    </ReferenceArrayInput>

这几乎完全符合我的要求,显示Datagrid显示了正确的选择数据,但是,当 AutocompleteArrayInput 上的选定项目发生更改时,它不会更新。我怎么尝试过(可能已经经历了所有的钩子和上下文),但我无法让它工作。

这可能吗?当 Datagrid 上的选择更改时,如何更新 AutocompleteArrayInput

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。