时间戳

首页 > 解决方案 > 无法重置 SelectInput 中的所有选项

react-admin - 无法重置 SelectInput 中的所有选项

问题描述

用户需要首先在 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 而不加载当前选择的值？

标签： react-admin

解决方案

我知道这是一个迟到的答复，但它可能会帮助某人。SelectInput我通过在每个内部的两个 s上使用以下步骤实现了相同的效果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>

我使用了此链接中的步骤并根据另一个 SO question 添加了该key属性，但我现在无法找到它。

推荐阅读