触发 react-admin SelectInput 字段的动态值集更改答案

【问题标题】：Trigger on change on dynamic value set for react-admin SelectInput field触发 react-admin SelectInput 字段的动态值集更改
【发布时间】：2021-07-19 10:00:54
【问题描述】：

我们可以触发 SelectInput/TextField 的变化吗？例如，如果我们使用源属性为 SelectInput 字段设置值，例如：

<SelectInput source='domain' onChange={() => {
  //... fetch geo list
  //... then set geo value
}}/>

然后以相同的形式，我想根据第一个选择输入值更新第二个选择输入字段，例如：

<SelectInput source='geo' .../>

但如果我动态更新“域”的源值，那么它不会在更改时触发。有没有办法让这成为可能。

【问题讨论】：

添加一个更完整的代码示例，不清楚你现在要做什么。

标签： reactjs react-admin

【解决方案1】：

您必须反过来做：不是应该通知地理区域的域，而是应该对域更改做出反应的地理区域。这就是 React 的方式！

react-admin 文档 (https://marmelab.com/react-admin/Inputs.html#linking-two-inputs) 说明需要使用 react-final-form 的 useFormState 钩子来获取当前表单状态：

import * as React from 'react';
import { Edit, SimpleForm, SelectInput } from 'react-admin';
import { useFormState } from 'react-final-form';

const countries = ['USA', 'UK', 'France'];
const cities = {
    USA: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix'],
    UK: ['London', 'Birmingham', 'Glasgow', 'Liverpool', 'Bristol'],
    France: ['Paris', 'Marseille', 'Lyon', 'Toulouse', 'Nice'],
};
const toChoices = items => items.map(item => ({ id: item, name: item }));

const CityInput = props => {
    const { values } = useFormState();
    return (
        <SelectInput
            choices={values.country ? toChoices(cities[values.country]) : []}
            {...props}
        />
    );
};

const OrderEdit = props => (
    <Edit {...props}>
        <SimpleForm>
            <SelectInput source="country" choices={toChoices(countries)} />
            <CityInput source="cities" />
        </SimpleForm>
    </Edit>
);

export default OrderEdit;

【讨论】：

感谢@François Zaninotto，我非常感谢您的回复，但是在我们添加了对 SelectInput 更改事件的异步调用的情况下，然后在编辑页面上，当值被分配给该特定 SelectInput 时，它将不会执行在更改时不会执行异步功能。那么我们该如何处理这种情况呢。