Admin on Rest教程：如何结合ReferenceInput使用DependentInput

首先得指出你当前代码里的核心问题：DependentInput的dependsOn="type.value"是无法生效的，因为你的ReferenceInput绑定的source="type"对应的是level_type表的id值（也就是level表中type字段存储的是关联ID），而不是level_type的value字段，表单的状态里并没有type.value这个路径，所以联动逻辑触发不了。

下面给你两种可行的解决方案，你可以根据自己的需求选择：

方案一：通过数据获取钩子直接判断关联资源的字段 #

这种方式不需要依赖DependentInput，而是利用React Admin的useGetOne钩子获取选中的level_type详情，结合表单状态来控制字段显示：

import { Edit, SimpleForm, ReferenceInput, SelectInput, NumberInput, useGetOne, useFormState } from 'react-admin';

export const LevelEdit = (props) => {
    // 获取当前表单的状态值
    const { values } = useFormState();
    // 根据选中的type ID，获取对应的level_type记录（只有当type存在时才发起请求）
    const { data: levelType } = useGetOne('level_type', { id: values.type, enabled: !!values.type });

    return (
        <Edit {...props}>
            <SimpleForm>
                <ReferenceInput source="type" reference="level_type">
                    <SelectInput optionText="value" />
                </ReferenceInput>
                {/* 当选中的level_type的value为"test2"时，渲染NumberInput */}
                {levelType?.value === 'test2' && (
                    <NumberInput source="field" />
                )}
            </SimpleForm>
        </Edit>
    );
};

这个方案的优势是逻辑直观，不需要额外处理表单的临时字段，直接通过关联资源的真实数据来控制显示。

方案二：通过临时字段配合DependentInput实现联动 #

如果你希望保留DependentInput的使用方式，可以通过自定义ReferenceInput的onChange事件，把选中的level_type的value存入一个临时表单字段，让DependentInput依赖这个字段：

import { Edit, SimpleForm, ReferenceInput, SelectInput, DependentInput, NumberInput, useForm } from 'react-admin';

export const LevelEdit = (props) => {
    const { mutate } = useForm();

    const handleTypeChange = (selectedId, selectedOption) => {
        // 更新表单中type字段的值（关联ID）
        mutate({ type: selectedId });
        // 将选中的level_type的value存入临时字段typeValue
        mutate({ typeValue: selectedOption.value });
    };

    return (
        <Edit {...props}>
            <SimpleForm>
                <ReferenceInput 
                    source="type" 
                    reference="level_type"
                    onChange={handleTypeChange}
                >
                    <SelectInput optionText="value" />
                </ReferenceInput>
                {/* 依赖临时字段typeValue，当值为"test2"时显示NumberInput */}
                <DependentInput dependsOn="typeValue" value="test2">
                    <NumberInput source="field" />
                </DependentInput>
            </SimpleForm>
        </Edit>
    );
};

这里的typeValue是一个临时字段，不会被提交到后端，只是用来做联动判断，完美适配DependentInput的使用逻辑。

内容的提问来源于stack exchange，提问作者anton