React-Admin升级至4.x后ReferenceInput不再触发onChange问题求助

原因 #

React-Admin从2.x升级到4.x后，表单底层引擎从redux-form切换为react-hook-form，两者字段更新触发逻辑存在差异：

• 2.x版本中，redux-form会在任何字段（包括ReferenceInput）的值发生变化时立即触发表单的onChange回调；
• 4.x版本中，SimpleForm的onChange默认仅监听普通输入控件的实时变化，而ReferenceInput的下拉选择操作默认不会即时触发该回调——这是因为ReferenceInput内部的SelectInput在选择选项时，值的同步逻辑被调整，不会主动触发表单全局的onChange。

解决方案 #

推荐使用react-hook-form的watch API监听所有字段变化，这种方式更通用，能覆盖所有表单字段（包括ReferenceInput）：

方案1：全局监听所有字段变化 #

通过useFormContext获取表单上下文，用watch函数监听所有字段的变化事件，统一触发通用操作：

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

const doSomething = () => {
    // 你的通用操作逻辑
};

// 监听表单字段变化的无UI组件
const FormFieldWatcher = () => {
    const { watch } = useFormContext();
    
    watch((values, changeInfo) => {
        // 仅在字段值改变时触发操作
        if (changeInfo.type === 'change') {
            doSomething();
        }
    });
    
    return null;
};

const ItemCreate = ({ dataProvider, ...props }) => (
    <Create title="Create Class" {...props}>
        <SimpleForm>
            <FormFieldWatcher />
            
            <TextInput source="name" label="Name"/>
            
            <ReferenceInput label="Item" source="item" reference="items">
                <SelectInput optionText={(choice) => `${choice.itemName}`} />
            </ReferenceInput>
        </SimpleForm>
    </Create>
);

方案2：单独给ReferenceInput配置回调 #

如果只需要针对ReferenceInput处理，可以给SelectInput添加自定义onChange，手动同步值并触发操作：

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

const doSomething = () => {
    // 你的通用操作逻辑
};

const ItemCreate = ({ dataProvider, ...props }) => {
    const { setValue } = useFormContext();
    
    const handleItemChange = (value) => {
        // 同步表单字段值
        setValue('item', value);
        // 触发通用操作
        doSomething();
    };

    return (
        <Create title="Create Class" {...props}>
            <SimpleForm onChange={doSomething}>
                <TextInput source="name" label="Name"/>
                
                <ReferenceInput label="Item" source="item" reference="items">
                    <SelectInput 
                        optionText={(choice) => `${choice.itemName}`} 
                        onChange={(e) => handleItemChange(e.target.value)}
                    />
                </ReferenceInput>
            </SimpleForm>
        </Create>
    );
};

注意事项 #

• 全局监听方案更适合需要统一处理所有字段变化的场景，无需为每个字段单独配置；
• 确保doSomething内部逻辑不会引发无限循环（比如避免在函数内再次修改表单值）。

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