如何根据 react-admin 上的另一个过滤器输入添加过滤器输入？

如何解决如何根据 react-admin 上的另一个过滤器输入添加过滤器输入？

我在 react-admin 上使用并尝试将过滤器选项添加到列表中。

我的问题是如何根据另一个过滤器输入添加过滤器输入？

我想按组织和项目过滤列表，但项目与组织相关联，因此我想仅在选择组织后启用选择项目，并且仅启用与所选组织关联的项目。

这就是我尝试做的：

 const ProjectInputs = () => {
    const { values } = useFormState();
    const translate = useTranslate();
    const classes = useStyles();

    return (

        <ReferenceInput
            label={translate("resources.projects.name",{ smart_count: 1 })}
            source="projectId"
            reference="projects"
            filter={{ organizationId: values.organizationId }}
            disabled={!values.organizationId}
            alwaysOn
            variant="standard"
        >
            <SelectInput
                optionText="name"
                resettable
                alwaysOn
            />

        </ReferenceInput>

    );
}

export const Paymentilter: FC<Omit<FilterProps,'children'>> = props => {
const classes = useFilterStyles();
return (
    <Filter {...props}>

        <ReferenceInput
            source="organizationId"
            reference="organizations"
            variant="standard"
        >
            <AutocompleteInput
                optionText={(choice?: Organization) =>
                    choice?.id // the empty choice is { id: '' }
                        ? `${choice.name}`
                        : ''
                }

            />
        </ReferenceInput>

        <ProjectInputs />
    </Filter>
);

};

它可以工作，但存在一些问题：

我无法将项目输入定义为始终开启。
在添加过滤器按钮中，此输入没有名称，只有空白收缩空间。
项目输入的位置是无序输入弹出。
选择此过滤器后，我无法关闭它。

你对我有什么想法吗？

如何解决我的问题？

我应该以其他方式解决我的问题吗？

谢谢！

编辑：

我确实喜欢@doctoragon方式，没关系。这样，只有当我们选择它出现的组织和取消它消失时，才能从添加过滤器按钮中选择项目输入。

这对我来说没问题，但第二个输入看起来仍然不同，正如您在图片上看到的那样，它在上方然后是其他输入，并且取消按钮被所选选项覆盖。

解决方法

您或许可以使用过滤器中的 FormDataConsumer 解决此问题。

<Filter {...props}>
  <ReferenceInput source="organizationId" ... />
  <FormDataConsumer source="projects" alwaysOn>
    {
      ({ formData,...restOfTheProps }) => organizationId &&  <ProjectInputs />
    }
  </FormDataConsumer>
</Filter>