Реагировать администратор получить уникальные данные из базы данных для selectInput - PullRequest
0 голосов
/ 25 февраля 2019

Я хочу получить уникальные данные из базы данных в раскрывающемся меню, так как у меня есть два раскрывающихся меню, и оба они зависят друг от друга, например, если я выберу что-то в одном раскрывающемся меню, оно будет отображаться так, что данные связанык этому в другом раскрывающемся списке.`

<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>`

В дБ есть поля, подобные этому

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

в первом раскрывающемся списке. Я хочу показать уникальные данные из типа документа, а во втором - соответственно имя документа

1 Ответ

0 голосов
/ 07 мая 2019

Для этой цели мы использовали пользовательский компонент ввода:

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} />
    </>
  );
};
...