Question

我想从下拉菜单中的db获取唯一数据，因为我有两个下拉菜单，并且两者相互依赖，例如，如果我在一个下拉列表中选择某项，则它将显示相关数据在另一个下拉菜单中。 `

<FormDataConsumer>

  {({ formData, dispatch, ...rest }) => (

    <Fragment>

      <ReferenceInput basePath={props.basePath} validate={requiredValidator} source="cc_documents_section_id" reference="documents-section" label="Document Type">
       <SelectInput optionText="cc_document_type" {...rest} />
     </ReferenceInput>

     <ReferenceInput source="cc_documents_section_id" reference="documents-section" validate={requiredValidator} label="Document Name">
        <SelectInput optionText="cc_document_name"
                            onChange={value => dispatch(
                            change(REDUX_FORM_NAME,'cc_document_type', null)
                                )}{...rest}
                         />
          </ReferenceInput>

       </Fragment>
      )}
</FormDataConsumer>`

在db中有这样的字段

{ doctype: "A", docname: "X", id: 1 },
{ doctype: "A", docname: "Y", id: 2 },
{ doctype: "B", docname: "Z", id: 3 }

在第一个下拉菜单中，我想显示doctype中的唯一数据，然后在第二个下拉列表中，相应地显示docname

Answer 1

我们为此使用了自定义输入组件：

interface UniqueSelectInputProps {
  choices?: [];
  source?: string;
}

const UniqueSelectInput = (props: UniqueSelectInputProps) => {
  const { choices, source } = props;

  let choices_unique: Array<{ name: String; id: String }> = [];
  if (choices && source) {
    const choices_unique_list = choices
      .map(item => item[source])
      .filter((value, index, self) => self.indexOf(value) === index);
    choices_unique = choices_unique_list.map(item => {
      return { name: item, id: item };
    });
  }
  return (
    <>
      <SelectInput choices={choices_unique} source={source} />
    </>
  );
};

React Admin从db获取selectInput的唯一数据

1 个答案: