Невозможно сбросить все варианты в SelectInput - PullRequest
Новая
       7

Невозможно сбросить все варианты в SelectInput

0 голосов
/ 30 сентября 2018

Пользователь должен сначала выбрать проект в AutocompleteInput, делая это, чтобы установить свойство фильтра в ReferenceInput, которое будет загружать возможные значения с сервера в список выбора SelectInput.Данные выбираются с сервера, однако, если выбранный в SelectInput выбор больше не отображается в списке, он не сбрасывается.Кроме того, выбранное значение все еще находится в списке выбора, даже если оно не было возвращено из остальной службы.Это код, который я написал, который имеет эту проблему: 

<ReferenceInput label="Project" source="projectId" reference="projecten" filterToQuery={searchText => ({ naam: searchText })}>
    <AutocompleteInput optionText="naam" optionValue="id" inputValueMatcher={() => null} />
</ReferenceInput>
<FormDataConsumer>
    {({ formData, ...rest }) => {
        return  <ReferenceInput label="Lot" source="lotId" reference="loten" filter={{ projectId: formData.projectId }} {...rest}>
                    <SelectInput optionText="lotNummer"/>
                </ReferenceInput>
    }}
</FormDataConsumer>

Как мне сбросить SelectInput onChange AutocompleteInput и не загружать текущее выбранное значение?

1 Ответ

0 голосов
/ 09 июня 2019

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

  1. импорт change из redux-form

    import { change } from redux-form

  2. Дайте SimpleForm имя

    <SimpleForm form="myForm"...

  3. Переместите свой первый ReferenceInput внутрь FormDataConsumer

    <FormDataConsumer> {({ formData, ...rest }) => { return ( <div> <ReferenceInput label="Project" ... <ReferenceInput label="Lot" ... </div> ); } </FormDataConsumer>

  4. Добавьте onChange к своему первому ReferenceInput

    <ReferenceInput label="Project" source="projectId" reference="projecten" filterToQuery={searchText => ({ naam: searchText })} onChange={() => {rest.dispatch(change('myForm', 'lotId', ''))}} >

  5. Добавьте свойство key кваш второй ReferenceInput и используйте ваш первый ReferenceInput источник в качестве значения

    <ReferenceInput label="Lot" source="lotId" reference="loten" filter={{ projectId: formData.projectId }} key={formData.projectId} {...rest}>

Наконец вы получите 

<SimpleForm name="myForm">
    <FormDataConsumer>
        {({ formData, ...rest }) => {
            return  (
                <div>
                    <ReferenceInput label="Project" source="projectId"
                        reference="projecten"
                        filterToQuery={searchText => ({ naam: searchText })}
                        onChange={() => {rest.dispatch(change('myForm', 'lotId', ''))}} >
                        <AutocompleteInput optionText="naam" optionValue="id"
                            inputValueMatcher={() => null} />
                    </ReferenceInput>
                    <ReferenceInput label="Lot" source="lotId" reference="loten"
                        filter={{ projectId: formData.projectId }}
                        key={formData.projectId} {...rest} >
                        <SelectInput optionText="lotNummer" />
                    </ReferenceInput>
                </div>
            );
        }}
    </FormDataConsumer>
</SimpleForm>

Я использовал шаги из этой ссылки и добавил свойство key в соответствии с другим вопросом SO, но я не могу найти его сейчас.

...