使用单独的组件创建自定义 ReferenceInput 时出错答案

【问题标题】：Error on Creating custom ReferenceInput with separate component使用单独的组件创建自定义 ReferenceInput 时出错
【发布时间】：2017-09-20 04:37:36
【问题描述】：

我正在尝试创建包含 SelectInput 的 ReferenceInput。

下面的代码完美运行（请关注ReferenceInput）

但是，我想将它分成另一个组件并将数据作为道具传递。我是这样弄的。

当我运行它时，会发生此错误

在这个文件中 https://github.com/marmelab/admin-on-rest/blob/49a616c93d1ee5ea0bfa3c5f7abea0bb29c8d01c/src/mui/input/ReferenceInput.js#L243

我做错了什么？

谢谢

【问题讨论】：

标签： admin-on-rest

【解决方案1】：

输入组件使用 Redux-Form 来实际渲染表单并将应用程序状态连接到输入组件。

输入道具在幕后由 ReferenceInput 传递给它的孩子。

如果您想创建孩子，那么您需要执行以下操作。这是来自我的应用程序的代码，但我相信您会看到这种模式。

const TaleGenreInput = ({style, text, ...props}) => {
  return (
    <div style={style.container} >
      <span style={style.span}>{text}:&nbsp;</span>
      <ReferenceInput {...props} reference="genres" >
        <GenreInputGroup {...props} style={style} elStyle={style.elStyle} optionText='name' />
      </ReferenceInput>
    </div>
  )
}

const GenreInputGroup = ({style, elStyle, optionText, ...rest}) => {
  return (
    <div>
      <SelectInput {...rest} style={style.dropdown} elStyle={style.dropDownElStyle} optionText='name' allowEmpty />
      <SelectInput {...rest} style={style.dropdown} elStyle={style.dropDownElStyle} optionText='name' allowEmpty />
    </div>
  )
}

{...rest} 确保从父级传递的所有道具都进入 SelectInput。您还可以控制台记录其值以查看它包含的所有内容。对调试有很大帮助。

【讨论】：