Question

用户需要首先在AutocompleteInput中选择一个项目，这样做将在ReferenceInput上设置filter属性，该属性将从服务器将可能的值加载到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>

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

Answer 1

我知道这是一个较晚的答复，但可能会对某人有所帮助。通过在每个SelectInput中的两个ReferenceInput上执行以下步骤，我获得了相同的效果。我希望它也适用于您的结构。

从change导入redux-form

import { change } from redux-form
给您的SimpleForm命名

<SimpleForm form="myForm"...
在ReferenceInput内移动您的第一个FormDataConsumer

<FormDataConsumer> {({ formData, ...rest }) => { return ( <div> <ReferenceInput label="Project" ... <ReferenceInput label="Lot" ... </div> ); } </FormDataConsumer>
在您的第一个onChange中添加一个ReferenceInput

<ReferenceInput label="Project" source="projectId" reference="projecten" filterToQuery={searchText => ({ naam: searchText })} onChange={() => {rest.dispatch(change('myForm', 'lotId', ''))}} >
在第二个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属性，但现在无法找到它。

无法重置SelectInput中的所有选择

1 个答案: