Reactjs 如何让FileInput字段在react admin 3.2.3中工作

我遵循react admin 3.2.0关于

FileInput

字段的文档（请参阅），制作了

create

表单，如下所示：

export const TemplateCreate = props => {
    const classes = useStyles();
    return (
        <Create {...props}>
            <SimpleForm redirect="list">
                <TextInput source="id" disabled variant="outline" />
                <TextInput source="name" label="Dateiname" />
                <TextInput source="beschreibung" />
                <FileInput source="pdffile" label="PDF-Template" accept="application/pdf" >
                    <FileField source="src" title="title" />
                </FileInput>
            </SimpleForm>
        </Create>
    );
};

---

如何让它工作？

在使用它之前，您可能没有定义useStyles（类似的内容）：

variant=“outline”

无效。使用

variant=“outlined”

看

---

要知道这一点，这要归功于

它们是被定义的，否则会导致编译错误。我描述的错误是运行时错误。错误显然不在您显示的代码中。我想是的，也许我只是错误地使用了组件。。。我不知道，文档不是很详细。我希望得到一些关于如何在react admin中进行文件上传的提示…请看这里：“扩展数据提供程序（文件上传示例）”谢谢，我已经在我的数据提供程序中实现了这一点。问题是，错误发生在呈现表单时，我甚至无法启动上载。

> isMuiElement.js:3 Uncaught TypeError: Cannot read property 'muiName'
> of undefined
>     at isMuiElement (isMuiElement.js:3)
>     at FormControl.js:101
>     at forEachSingleChild (react.development.js:1252)
>     at traverseAllChildrenImpl (react.development.js:1145)
>     at traverseAllChildrenImpl (react.development.js:1161)
>     at traverseAllChildren (react.development.js:1226)
>     at Object.forEachChildren [as forEach] (react.development.js:1274)
>     at FormControl.js:100
>     at mountState (react-dom.development.js:16624)
>     at Object.useState (react-dom.development.js:17181)
>     at Object.useState (react.development.js:1619)
>     at FormControl (FormControl.js:94)
>     at renderWithHooks (react-dom.development.js:16260)
>     at updateForwardRef (react-dom.development.js:18143)
>     at beginWork$1 (react-dom.development.js:20211)
>     at HTMLUnknownElement.callCallback (react-dom.development.js:336)
>     at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
>     at invokeGuardedCallback (react-dom.development.js:440)
>     at beginWork$$1 (react-dom.development.js:25780)
>     at performUnitOfWork (react-dom.development.js:24695)
>     at workLoopSync (react-dom.development.js:24671)
>     at performSyncWorkOnRoot (react-dom.development.js:24270)
>     at react-dom.development.js:12199
>     at unstable_runWithPriority (scheduler.development.js:697)
>     at runWithPriority$2 (react-dom.development.js:12149)
>     at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
>     at flushSyncCallbackQueue (react-dom.development.js:12182)
>     at unbatchedUpdates (react-dom.development.js:24439)
>     at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)
>     at Object.render (react-dom.development.js:27608)
>     at Module../src/index.js (index.js:7)
>     at __webpack_require__ (bootstrap:785)
>     at fn (bootstrap:150)
>     at Object.1 (serviceWorker.js:137)
>     at __webpack_require__ (bootstrap:785)
>     at checkDeferredModules (bootstrap:45)
>     at Array.webpackJsonpCallback [as push] (bootstrap:32)
>     at main.chunk.js:1

import { makeStyles } from '@material-ui/core/styles'
...
const useStyles = makeStyles(theme => ({
  button: {
    marginTop: '0em',
  },
  ...
}))