标签: react-admin

我开始使用react-admin并且基本上工作正常。但是我在使用ReferenceField.

我调用的 REST API 返回以下 JSON 数据：

/语言

{
  "language": [
    {
      "id": 0,
      "name": "Language #0"
    },
    {
      "id": 1,
      "name": "Language #1"
    },
    {
      "id": 2,
      "name": "Language #2"
    },
    {
      "id": 3,
      "name": "Language #3"
    }
  ]
}

/我的参考文献

{
  "myreferences": [
    {
      "id": 0,
      "langauge": {
        "id": 0,
        "name": "Language #0"
      },
      "name": "My reference #0"
    },
    {
      "id": 1,
      "langauge": {
        "id": 1,
        "name": "Language #1"
      },
      "name": "My reference #1" …

我正在使用react-admin并在功能中工作。我需要在ImageField中显示原始图片，但如果我选择拖放新图片，那么我需要用新图片更新该ImageField。我似乎看不到任何图像相关编辑功能的常见用例的示例。

<ImageInput source="src" label="Product Image" accept="image/*" > 
        <ImageField source="imageUrl"/> 
</ImageInput>

好像和这个问题类似

但显然我对此很陌生，经过一番尝试后，我并没有更接近让它开始...我所期望的行为我猜是因为 imageUrl 确实存在于表单上，所以上面的 ImageField 会当表单打开时已经填充了现有的图片，但这并不是因为它在..如果有人能指出我正确的方向，那将是一个很大的帮助

在我们的react-admin应用程序中，首先我们显示一个产品列表。

在每一行上，我们还显示一个文本字段（以允许用户输入份数）和一个“打印”按钮。

片段如下：

export const ProductList = props => (
  <List filters={<ProductFilter />} exporter={false} {...props} >
    <Datagrid rowClick="edit" >
      <TextField source="id" />
      <TextField source="productName" />
      <PrintPanel label="Print" />
    </Datagrid>
</List>
);

自定义字段PrintPanel如下：

import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

class PrintPanel extends React.Component {
  state = {
    copies: 1,
  }
  render() {
    return (
      <span>
        <TextField label="Number of copies"/>
        <Button variant="contained" color="primary"
          onClick={() => alert(1)}   // PROBLEM: this is NOT called when user click the button
        > …

我想并排放3个输入.我有一个如下代码,在每次迭代中,我想要三个组件并排.可能吗？

{
    this.state.features.length > 0 ?
        this.state.features.map((feature) => {
            return (
                <div>
                    <BooleanInput key={feature} source={this.assignIsFeatureActiveProp(feature)} label={feature} />
                    <DisabledInput source="id" label="Value" defaultValue={feature} />
                    <TextInput source={this.assignFeatureValueProp(feature)} label="Value" />
                </div>
            )
        })
        :
        null
}

当我单击保存按钮时，在 react-admin SimpleForm组件验证工作正常。当我单击保存按钮时，必填字段会突出显示并标记为红色。

SaveButton只要表单无效，我就想添加一个类名。通过这种方式，我可以向用户明确表示他还没有完成表单并防止用户点击它。

这是此类 SimpleForm 的简化版本。

import {
    required,
    //...
} from 'react-admin';

const UserCreateToolbar = props =>
    <Toolbar {...props}>
        <SaveButton
            label="user.action.save_and_show"
            redirect="show"
            submitOnEnter={true}
        />
    </Toolbar>;

export const UserCreate = props =>
    <Create {...props}>
        <SimpleForm
            toolbar={<UserCreateToolbar />}
        >
            <TextInput source="name" validate={[required()]} />
        </SimpleForm>
    </Create>;

有些字段我只想显示它们是否有值。我希望这样做：

<Show {...props} >
  <SimpleShowLayout>
    { props.record.id ? <TextField source="id" />: null }
  </SimpleShowLayout>
</Show>

但这不起作用。我可以通过使每个字段成为高阶组件来使其工作，但我想做一些更清洁的事情。这是我拥有的 HOC 方法：

const exists = WrappedComponent => props => props.record[props.source] ?
  <WrappedComponent {...props} />: null;

const ExistsTextField = exists(TextField);

// then in the component:

<Show {...props} >
  <SimpleShowLayout>
    <ExistsTextField source="id" />
  </SimpleShowLayout>
</Show>

这正确地显示了值，但剥离了标签。

1. 从生命周期回调中调用。 我有如下代码：

// app.js
<Admin>
   <Resource name="FooList" list={FooList} />
</Admin>

// FooList.js
class FooList extends React.Component {
     componentDidMount () {
         showNotification("foo")
     }
}

export default connect(null, {showNotification})(FooList)

当组件安装时，控制台出现错误：

 Warning: React does not recognize the `showNotification` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `shownotification` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

2. 调用某个事件（例如点击）。在其他情况下，我有一些处理程序并调用showNotification …

第一次使用React-Admin。我正在使用它来创建一个面板，该面板基本上监控我从 API 获得的一些参数。但是，有一个部分需要上传 .csv 文件。我正在尝试使用FileInput实现它，但我无法捕获该文件。我不明白该怎么做。

文件选择步骤（从电脑到浏览器）工作正常，但我的问题是在该步骤之后我无法处理文件。我阅读了文档，但我不知道该怎么做。我尝试了很多不同的方法，但我快疯了。

下面是基本代码。我想我必须添加一个处理程序或类似的东西，但是，如何？我对 React 的经验也很少。我知道基础知识，但我只是构建了几个（超级）简单的应用程序。仅供学习。

// UploadFile.js
...

export const UploadSection = props => (
    <SimpleForm>
        <FileInput source="csvFile" label="Upload file (.csv)" accept="text/csv" >
            <FileField source="src" title="title" />
        </FileInput>
    </SimpleForm>
);


// App.js
...

const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider} >
        ...
        <Resource name="uploadSection" list={UploadSection} />
        ...
    </Admin>
);

问题：

1. 如何捕获 .csv 文件？

提前致谢！

我正在使用 react-admin 前端框架，想知道是否有办法从路由中删除“#”。我正在使用 customRoutes 属性为我们的系统提供路由集合。

<Admin
    title="my title"
    menu={Menu}
    theme={theme}
    dashboard={Ledgers}
    loginPage={LoginPage}
    authProvider={Authorization}
    dataProvider={DataProviders}
    i18nProvider={i18nProvider}
    locale="en"
    appLayout={Layout}
    customRoutes={Routes}
>
    <Resource name="users" list={Users} />
</Admin>```

在列数很少的列表视图中，列非常宽。我想限制至少其中一些列的宽度（最后一列除外）：

仍在努力加快 react-admin、react 和 material-ui 的速度。我确定其中涉及一些样式。有人可以指出我正确的方向吗？谢谢。

更新：我按照 Jozef 的建议添加了样式，但没有更改。下面是它在 Inspect 中的样子：