如何自定义 BooleanInput 以在列表中添加或删除项目？答案

【问题标题】：How to customize BooleanInput to add or remove items from a list?如何自定义 BooleanInput 以在列表中添加或删除项目？
【发布时间】：2020-06-01 10:23:00
【问题描述】：

我正在使用很棒的 react-admin 库并寻找一种自定义 BooleanInput 字段的方法。

以下用例：我有一组授予用户的权限。例如

user: {
  rights: ["REGULAR", "VIP", "ADMIN"],
  otherFields...
}

并且用户体验要求是有一个 booleanInput 来指示用户是否具有某种权限。例如。如果 rights 数组包含 VIP，则 BooleanInput 应设置为 true。如果用户将其设置为 false，则应从数组中删除 VIP，反之亦然。

知道怎么做吗？

【问题讨论】：

标签： reactjs react-redux react-admin

【解决方案1】：

您正在寻找的是转换输入以适应您的需求 https://marmelab.com/react-admin/Inputs.html#transforming-input-value-tofrom-record

<BooleanInput source="rights" format={v => v.includes("VIP")} parse={v => {if(v){ //return array including vip} else {// return array excluding vip}}} label="Admin" />

【讨论】：

嗨，普拉卡什，谢谢！这是正确的方向。我仍在为两个错误苦苦挣扎：1）第一次加载页面时，v 未定义，因此崩溃 2）重新加载页面后（未从 API 检索记录，我得到 Error: Cannot set a numeric property on an object 任何想法如何解决？
@Hola API 的响应是什么样的
它是一个包含动态项目数的字符串数组。例如。 “权利”：[“常规”、“VIP”、“OTHER_VALUES”]
@Hola 我的意思是整个 api 响应
在上面的评论中犯了一个错误。这是对象{ "id" : "152", "image" : "https:/cdn.image-server.com/defaultProfilePic.jpg", "username" : "somemeamail@someemail.com", "firstName" : "FirstName", "lastName" : "LastName", "lastModifiedDate" : "2019-07-10T17:32:23.110Z", "isVerified" : true, "rights" : [ "VIP", "USER" ] }