为 admin-on-rest 重组输入组件时出错

Question

我正在使用 admin on rest 的输入组件之一。我有一个看起来像这样的表格：

<FormTab label="Identity">
    ...
    ...
    <SelectInput
        source="status"
        choices={[
            { id: 'draft', name: 'Draft' },
            { id: 'official', name: 'Official' }
        ]} />
</FormTab>

效果很好。但是我想干掉我的代码，因为我在几个地方使用了这个特定的 <SelectInput> 配置。所以我创建了一个如下所示的新组件：

export class StatusInput extends Component { 
    render() {
        return (
            <SelectInput {...this.props}
               source="status"
               choices={[
                { id: 'draft', name: 'Draft' },
                { id: 'official', name: 'Official' }
               ]}
            />
        );
    }   
}

但是当我像这样用我的新组件替换原始代码时：

<FormTab label="Identity">
    ...
    ...
    <StatusInput />
</FormTab>

我收到一个错误：Uncaught TypeError: Cannot read property 'value' of undefined 在我正在重构的 SelectInput 组件中，通常定义的道具 ("input") 现在在我重构的组件中未定义。我是新手，所以我假设有一些我不理解的细微差别。但我的问题是：

原来的方式和新的方式（重组）在逻辑上不是等价的吗？我不明白什么道具被传递到 SelectInput，我没有依次传递我的重组组件。为什么一个有效而另一个无效，这让我很困惑。
如果这不是扩展的合适方式SelectInput我还有哪些其他选择？

Answer 1

问题是你没有发送任何 props，如果你查看 the source code，SelectInput 组件需要 input prop，里面有 value .

尝试像这样发送该道具：

<FormTab label="Identity">
  ...
  ...
  <StatusInput input={{ value: 'draft' }}/>
</FormTab>

理想情况下，您将从状态容器中获取该值。

Answer 2

我在 documentation 中找到这个问题后，我已经回答了问题的 #2 部分，因为这似乎是创建（但是，不是重组）admin-on-rest 兼容输入字段的正确方法.除了它不像他们在文档中描述的那样工作。

所以我偶然发现了这个 https://redux-form.com/7.2.3/examples/material-ui/，这就是我想出的一个组件。

import React from 'react';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import { Field } from 'redux-form';

const renderSelectField = ({
  input,
  label,
  meta: { touched, error },
  children,
  ...custom
}) => (
  <SelectField
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    onChange={(event, index, value) => input.onChange(value)}
    children={children}
    {...custom}
  />
)

const StatusInput = ({ source }) => (
    <Field
          name={source}
          component={renderSelectField}
          label="Status"
        >
        <MenuItem value="official" primaryText="Official" />
        <MenuItem value="draft" primaryText="Draft" />
    </Field>
);
export default StatusInput;

它在 FormTab 组件中作为子项工作。我仍然对为什么重组不起作用感到困惑。

为 admin-on-rest 重组输入组件时出错

Error recomposing Input components for admin-on-rest

reactjs

admin-on-rest