如何解决触发为 react-admin SelectInput 字段设置的动态值的更改
我们可以在 SelectInput/TextField 改变时触发吗?例如,如果我们使用如下源属性为 SelectInput 字段设置值:
<SelectInput source='domain' onChange={() => {
//... fetch geo list
//... then set geo value
}}/>
然后以相同的形式,我想根据第一个选择输入值更新第二个选择输入字段,例如:
<SelectInput source='geo' .../>
但是如果我动态更新“域”的源值,那么它不会在更改时触发。有什么办法可以做到这一点。
解决方法
你必须反过来做:不是应该通知geo的域,而是应该对域更改做出反应的geo。这就是 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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。