Question

如何在子资源创建表单中访问查询参数？

例如，如果我想在父资源编辑页面上有一个重定向到的按钮 Outer<-merge(x = analysisAdj, y = mappingAdj, by = "CATEGORY", all = TRUE) LOuter<-merge(x = analysisAdj, y = mappingAdj, by = "CATEGORY", all.x = TRUE) ROuter<-merge(x = analysisAdj, y = mappingAdj, by = "CATEGORY", all.y = TRUE)然后在子资源创建表单中我们/childresource/create?parentid=123我想要预先选择它吗？

它有可能已经存在吗？自定义反应路由例如<SelectInput source="parentid" />并且具有完整的自定义创建组件或者可能只是客户选择输入组件会更好吗？

我已经有了孩子的功能创建页面，但以某种方式预填充值会非常好。

Answer 1

根据Dennie的评论我有这个。

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";
import queryString from "query-string";

class ProductSelect extends React.Component {
  render() {
    const { location } = this.props;
    const parsed = queryString.parse(location.search);
    return <div>productid: {parsed.ProductId}</div>;
  }
}
ProductSelect.defaultProps = {
  location: PropTypes.object.isRequired
};
export default withRouter(ProductSelect);

并且能够在我的创建页面中使用那么好，但这还不是全部故事。我需要一些输入，所以我尝试将返回的div更改为NumberInput，但现在我又被卡住了，因为我现在正在

＆＃34;错误：NumberInput组件未在redux-form中调用。你装饰它并忘记将addField prop添加到组件中吗？＆＃34;

我相信我对此做了：

import React from "react";
import { NumberInput } from "admin-on-rest";
import PropTypes from "prop-types";
import { withRouter } from "react-router";
import queryString from "query-string";

class ProductSelect extends React.Component {
  render() {
    const { location } = this.props;
    const parsed = queryString.parse(location.search);
    return <NumberInput source="product" defaultValue={parsed.ProductId} />;
  }
}
ProductSelect.defaultProps = {
  location: PropTypes.object.isRequired,
  addField: true
};
export default withRouter(ProductSelect);

将NumberInput更改为redux-form字段我能够渲染字段但不能设置任何默认值

但是如何设置默认值或者我必须使用自定义redux-form完成整个创建页面？

在上面用作创建。

export const ProductCreate = props => (
  <Create {...props} redirect="edit">
    <SimpleForm>
      <ProductSelect source="ProductId"/>
    </simpleForm>
   </Create>

Gildas回答后编辑：

我修改了它，但我仍然得到相同的错误＆＃34;错误：NumberInput组件未在redux-form＆＃34;内调用。

创建它以演示它 - ＆gt; codesandbox.io/s/zqvp0r7y3l

import React from "react";
import { NumberInput } from "admin-on-rest";
import PropTypes from "prop-types";
import { withRouter } from "react-router";
import queryString from "query-string";

class ProductSelect extends React.Component {
  render() {
    const { location } = this.props;
    const parsed = queryString.parse(location.search);
    return <NumberInput source="product" defaultValue={parsed.ProductId} />;
  }
}
ProductSelect.defaultProps = {
  location: PropTypes.object.isRequired
};

const EnhancedProductSelect = withRouter(ProductSelect);

EnhancedProductSelect.defaultProps = {
  addField: true
};

export default EnhancedProductSelect;

Answer 2

回答你的第二个问题：

ProductSelect.defaultProps = {
  location: PropTypes.object.isRequired,
};

// This is the component exported and known by admin-on-rest, not ProductSelect
const EnhancedProductSelect = withRouter(ProductSelect);

// Hence, this is the one which needs a defaultProp for addField
EnhancedProductSelect.defaultProps = {
  addField: true
};

export default EnhancedProductSelect;

这对第一个问题有帮助吗？

https://codesandbox.io/s/pp0o4x40p0

预填充或将查询参数传递给子资源

2 个答案: