触发为 react-admin SelectInput 字段设置的动态值的更改

Question

Can we trigger on change of SelectInput/TextField. For example if we set value for SelectInput field using source property like:

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

then in the same form I want to update 2nd Select input field based on first select input value like:

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

but if I update source value of 'domain' dynamically then it is not triggering on change. Is there any way to make this possible.

Answer 1

You have to do it the other way around: it' not the domain that should notify the geo, it's the geo that should react to the domain change. That's the React way!

The react-admin documentation (https://marmelab.com/react-admin/Inputs.html#linking-two-inputs ) explains that you need to use react-final-form's useFormState hook to get the current form state:

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;