React-Admin中如何根据选择输入实时更新文本字段显示热量

要在下拉框上方实时显示选中食谱的热量，你可以结合React-Admin的useFormContext和useGetOne hooks来实现，具体步骤如下：

1. 导入所需的hooks和组件：

import { ReferenceInput, AutocompleteInput, TextField, useFormContext, useGetOne } from 'react-admin';

2. 自定义组件封装下拉框和热量显示：

const BreakfastRecipeSelector = () => {
  // 获取表单当前值，拿到选中的食谱ID
  const { watch } = useFormContext();
  const selectedRecipeId = watch('tuesday.breakfast');

  // 根据选中的ID获取食谱详情
  const { data: recipe, isLoading } = useGetOne('recipes', { id: selectedRecipeId });

  return (
    <>
      {/* 显示热量的文本框，处理加载状态和无选中的情况 */}
      <TextField
        label="当前热量"
        value={isLoading ? '加载中...' : recipe?.calories ? `${recipe.calories} 大卡` : '未选择食谱'}
        disabled
        fullWidth
        margin="normal"
      />
      {/* 原有的食谱选择下拉框 */}
      <ReferenceInput source="tuesday.breakfast" reference="recipes">
        <AutocompleteInput optionText="name" optionValue="id" fullWidth />
      </ReferenceInput>
    </>
  );
};

3. 在编辑页面中使用这个自定义组件替代原来的ReferenceInput即可。

代码说明： #

• useFormContext的watch方法可以实时监听表单字段"tuesday.breakfast"的变化，获取选中的食谱ID
• useGetOne会根据ID从recipes资源中获取对应的食谱数据，自动处理请求状态
• TextField会根据加载状态和获取到的食谱数据，动态显示对应的热量值，未选择或加载时显示提示文本

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