从 react-admin 中的自定义函数回调修改特定的 redux-form 值
modify specific redux-form value from custom function callback in react-admin
我已经修改了 ImageInput
的 onDrop
函数,这样它最终会从我的自定义函数中 return 一个 url。但是,我想将 return 值设置为 ImageInput
的 image
值。
...
const uploadImg = ( acceptedFiles ) => {
return Promise.resolve(uploadImageToServer(file))
.then( url => {
// do something ...
})
}
const ProductEdit = ({ classes, ...props }) => (
<Edit {...props} title={<ProductTitle />}>
<TabbedForm>
<FormTab label="resources.categories.tabs.details" path="details">
<ImageInput source="image" label="Related pictures" accept="image/*" options={{onDrop: uploadImg}}>
<ImageField source="image" src="url" title="title" />
</ImageInput>
</FormTab>
</TabbedForm>
...
这在功能组件中是否可行?我在其他答案中看到可以调用 this.props.change(...)
来发送对 redux-form 的更改。但是这里我的 uploadImg
是 react.component 上下文之外的普通函数,因此无法访问 this
。
否则我是否必须将此组件重写为 class 组件?
好的,所以我发现解决方案是创建自定义操作并使用 redux-form
的 connect
方法分派操作。
使用FormDataConsumer
获取formData和dispatch方法。
+ import { FormDataConsumer, REDUX_FORM_NAME } from 'react-admin';
+ import { change } from 'redux-form';
+ import {changeImgUrl} from './actions';
...
const uploadImg = ( params, dispatch ) => {
result = await Promise.resolve(yourUploadImgFunc(params))
.then( res => return changeImgUrl(res) )
dispatch(change(REDUX_FORM_NAME, 'image', result))
}
const ProductEdit = ({ classes, ...props }) => (
<Edit {...props} title={<ProductTitle />}>
<TabbedForm>
<FormTab label="resources.categories.tabs.details" path="details">
<FormDataConsumer>
{({ formData, dispatch, ...rest }) => (
<Fragment>
<ImageInput source="image" label="Related pictures" accept="image/*" options={{onDrop: (params) => uploadImg(params, dispatch)}}>
<ImageField source="image" src="url" title="title" />
</ImageInput>
)}
</Fragment>
</FormDataConsumer>
</FormTab>
</TabbedForm>
...
然后定义一个新动作:
// actions.js
export const CHANGE_IMG_URL = 'CHANGE_IMG_URL';
export const changeImgUrl = img_url => ({
type: CHANGE_IMG_URL,
url: img_url
});
总结:
1. 从 react-admin 的 FormDataConsumer
.
收集 redux 的 dispatch
道具
2. 使用 redux-form 的 change
方法通过自定义操作创建操作。
不确定这是否是最好的方法,但它确实有效。希望它能帮助任何尝试在 react-admin 上进行自定义的人。
我已经修改了 ImageInput
的 onDrop
函数,这样它最终会从我的自定义函数中 return 一个 url。但是,我想将 return 值设置为 ImageInput
的 image
值。
...
const uploadImg = ( acceptedFiles ) => {
return Promise.resolve(uploadImageToServer(file))
.then( url => {
// do something ...
})
}
const ProductEdit = ({ classes, ...props }) => (
<Edit {...props} title={<ProductTitle />}>
<TabbedForm>
<FormTab label="resources.categories.tabs.details" path="details">
<ImageInput source="image" label="Related pictures" accept="image/*" options={{onDrop: uploadImg}}>
<ImageField source="image" src="url" title="title" />
</ImageInput>
</FormTab>
</TabbedForm>
...
这在功能组件中是否可行?我在其他答案中看到可以调用 this.props.change(...)
来发送对 redux-form 的更改。但是这里我的 uploadImg
是 react.component 上下文之外的普通函数,因此无法访问 this
。
否则我是否必须将此组件重写为 class 组件?
好的,所以我发现解决方案是创建自定义操作并使用 redux-form
的 connect
方法分派操作。
使用FormDataConsumer
获取formData和dispatch方法。
+ import { FormDataConsumer, REDUX_FORM_NAME } from 'react-admin';
+ import { change } from 'redux-form';
+ import {changeImgUrl} from './actions';
...
const uploadImg = ( params, dispatch ) => {
result = await Promise.resolve(yourUploadImgFunc(params))
.then( res => return changeImgUrl(res) )
dispatch(change(REDUX_FORM_NAME, 'image', result))
}
const ProductEdit = ({ classes, ...props }) => (
<Edit {...props} title={<ProductTitle />}>
<TabbedForm>
<FormTab label="resources.categories.tabs.details" path="details">
<FormDataConsumer>
{({ formData, dispatch, ...rest }) => (
<Fragment>
<ImageInput source="image" label="Related pictures" accept="image/*" options={{onDrop: (params) => uploadImg(params, dispatch)}}>
<ImageField source="image" src="url" title="title" />
</ImageInput>
)}
</Fragment>
</FormDataConsumer>
</FormTab>
</TabbedForm>
...
然后定义一个新动作:
// actions.js
export const CHANGE_IMG_URL = 'CHANGE_IMG_URL';
export const changeImgUrl = img_url => ({
type: CHANGE_IMG_URL,
url: img_url
});
总结:
1. 从 react-admin 的 FormDataConsumer
.
收集 redux 的 dispatch
道具
2. 使用 redux-form 的 change
方法通过自定义操作创建操作。
不确定这是否是最好的方法,但它确实有效。希望它能帮助任何尝试在 react-admin 上进行自定义的人。