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

Question

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

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

但是，我想将它分离到另一个组件中，并将数据作为 props 传递。我是这样做的。

当我运行它的时候，出现这个错误

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

我做错了什么？

谢谢

Answer 1

输入组件正在使用 Redux-Form 实际呈现表单并将应用程序状态连接到您的输入组件。

输入属性由 ReferenceInput 在幕后传递给它的 child。

如果要创建 child，则需要执行如下操作。这是我的应用程序中的代码，但我相信您会看到这种模式。

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} 确保从 parent 传递的所有道具都进入 SelectInput。您还可以控制台记录它的值以查看它包含的所有内容。对调试有很大帮助。

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

Error on Creating custom ReferenceInput with separate component

admin-on-rest