BooleanField 和 FunctionField 将数字更改为 Boolean

Question

我有问题，我相信它会对其他开发人员有所帮助。我的字段 "is_active" 在我的 API 端是布尔值，但它 return 0 或 1 而不是 TRUE 或 FALSE。我想用 <FunctionField/> 来包装 <BooleanField/> 但它没有用。有人可以帮忙。

这是我的代码：

<FunctionField source="is_active" label="is_active" render={(record) => record.is_active ? true : false}>
  <BooleanField/>
</FunctionField>

该栏还是空白。

谢谢。

Answer 1

我认为您误解了 FunctionField 组件。它呈现 render 道具的结果。您要实现的目标是：

<FunctionField source="is_active" label="is_active" render={(record,source) => 
    <BooleanField record={{...record,is_active:!!record.is_active}} source={source}/>}/>

但这不是很好。更好的方法是包装 dataProvider/restClient 并确保数据是布尔值。

// In FixMyDataFeature.js
export default restClient => (type, resource, params) => restClient(type,resource,params).then(response=>
   if(resource === 'Resource_with_numeric_is_active_field`){
      return {
         data: mutateIsActiveFieldToBoolean(response.data)
      }
   }
   else{
      return response;
   }
);

并用管理员调用它：

<Admin dataProvider={FixMyDataFeature(dataProvider)}... />

Answer 2

这是我的解决方案：（您可以导入它并使用它代替 BooleanField）

import React from 'react';
import { BooleanField } from "react-admin";

export const BooleanNumField = ({ record = {}, source}) => {
  let theRecord = {...record};

  theRecord[source + 'Num'] = !!parseInt(record[source]);

  return <BooleanField record={theRecord} source={source + 'Num'} />
}

Answer 3

我有一个问题，在数据库 table 中有一个名为 disabled 的字段，但在 Admin 中将 disabled 设置为 false 有点令人困惑实际上启用了一些东西。

基于 'Dennie de Lange' 答案，我创建了一个 Typescript 通用 BooleanOppositeField 和 BooleanOppositeInput。放在这里希望可以帮助某人：

import { BooleanField, BooleanInput, FunctionField } from 'react-admin';


interface IProps {
  label: string;
  source: string;
}

/**
 * Usually called using:
 *   <BooleanOppositeField label="Enabled" source="disabled"/>
 */
export const BooleanOppositeField = (props: IProps) => {
  return (
    <FunctionField {...props} render={(record: any | undefined, source: string | undefined) =>
      <BooleanField source="enabled" record={{ ...record, enabled: !(record![source!]) }} />}
    />
  );
};


/**
 * Usually called using:
 *   <BooleanOppositeInput label="Enabled" source="disabled" />
 */
export const BooleanOppositeInput = (props: IProps) => {
  return (
    <BooleanInput format={(v: boolean) => !v} parse={(v: boolean) => !v} {...props} />
  )
}

您可以通过以下方式使用它：

<BooleanOppositeField label="Enabled" source="disabled"/>

或

<BooleanOppositeInput label="Enabled" source="disabled" />

注意：我更喜欢这个解决方案，而不是 Dennie 推荐的解决方案

BooleanField 和 FunctionField 将数字更改为 Boolean

BooleanField with FunctionField change number to Boolean

admin-on-rest