React-Admin中如何根据一个SelectInput的选择联动另一个？

要实现「选择Location时自动同步对应Time Zone，且允许用户手动修改Time Zone」的需求，可以借助React-Admin的表单上下文和选择框的onChange事件来完成，具体步骤如下：

核心思路 #

1. 利用useFormContext钩子获取表单的字段值设置方法setValue
2. 给Location选择框添加onChange事件，选中新Location时，提取其关联的timezone_id并同步到Time Zone字段
3. 确保Location的API返回数据包含关联的timezone_id字段（对应数据库表的关联列）

代码实现 #

首先修正原代码中字段source的命名冲突问题（两个选择框不能都用id作为source），然后添加关联逻辑：

import { Create, SimpleForm, ReferenceInput, SelectInput, useFormContext } from 'react-admin';

const YourCreateComponent = () => {
    // 获取表单上下文的字段设置方法
    const { setValue } = useFormContext();

    return (
        <Create>
            <SimpleForm>
                {/* 其他表单字段... */}

                <ReferenceInput 
                    label="Location"
                    source="location_id" // 替换为表单中存储Location ID的实际字段名
                    reference="locations"
                >
                    <SelectInput 
                        optionText={choice => `${choice.location}, ${choice.state}`} 
                        onChange={(event, selectedLocation) => {
                            // 当选中Location时，同步设置对应的Time Zone
                            if (selectedLocation) {
                                setValue('timezone_id', selectedLocation.timezone_id);
                            }
                        }}
                    />
                </ReferenceInput>

                <ReferenceInput 
                    label="Time Zone"
                    source="timezone_id" // 替换为表单中存储Time Zone ID的实际字段名
                    reference="timezones"
                >
                    <SelectInput optionText="timezonecode" />
                </ReferenceInput>

                {/* 其他表单字段... */}
            </SimpleForm>
        </Create>
    );
};

export default YourCreateComponent;

关键说明 #

• 字段source修正：原代码中两个ReferenceInput的source都用id会导致表单数据冲突，需分别改为对应业务字段（如location_id和timezone_id）
• 关联逻辑触发：通过SelectInput的onChange事件，拿到选中的Location对象（包含数据库关联的timezone_id），再调用setValue同步Time Zone字段
• 手动覆盖支持：仅在Location变更时自动设置Time Zone，用户后续修改Time Zone不会反向影响Location，满足单向关联需求
• API数据要求：确保/locations端点返回的每个Location对象都包含timezone_id字段，否则无法获取关联的时区ID

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