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>

我在SelectInput组件中收到一个错误：Uncaught TypeError: Cannot read property 'value' of undefined，我正在重新组合，其中通常定义的prop（“input”）现在在我的重构组件中未定义。我是新来的反应，所以我假设有一些我不理解的细微差别。但我的问题是：

这不是原始的方式，而新的方式（重组）在逻辑上是等价的吗？我不明白什么道具被传递到SelectInput，我不会反过来通过我的重构组件。为什么一个有效，另一个没有让我感到困惑。
如果这不是扩展SelectInput的适当方式，那么我的其他选择是什么？

Answer 1

我在documentation中发现这个问题之后，我已经回答了问题的第2部分。因为这似乎是创建（但不是重新组合）管理员兼容输入字段的正确方法。除了它没有按照他们在文档中描述的方式工作。

所以我偶然发现了这个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组件中作为子项工作。我仍然很困惑为什么重组不起作用。

Answer 2

问题是你没有发送任何道具，如果你看the source code，SelectInput组件期待input道具中有value。< / p>

尝试像这样发送道具：

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

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

重新组合管理休息时的输入组件时出错

2 个答案: