无法重置 SelectInput 中的所有选项

Question

用户需要首先在 AutocompleteInput 中选择一个项目，这样做会在 ReferenceInput 上设置过滤器属性，这会将可能的值从服务器加载到 SelectInput 选项列表中。数据是从服务器获取的，但是，如果在 SelectInput 中选择的选项不再在列表中，则不会重置。此外，即使它不是从 rest 服务返回的，所选值仍在选择列表中。 这是我写的有这个问题的代码：

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

如何重置 AutocompleteInput 的 SelectInput onChange 而不加载当前选择的值？

Answer 1

我知道这是一个迟到的回复，但它可能会对某人有所帮助。我通过在每个ReferenceInput 内的两个SelectInputs 上使用以下步骤实现了相同的效果。我希望它也适用于您的结构。

1. 从redux-form导入change

   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>

我使用了 this link 中的步骤并根据另一个 SO 问题添加了 key 属性，但我现在找不到它。