从 react-admin 中的自定义函数回调修改特定的 redux-form 值答案

【问题标题】：modify specific redux-form value from custom function callback in react-admin从 react-admin 中的自定义函数回调修改特定的 redux-form 值
【发布时间】：2020-02-26 16:12:44
【问题描述】：

我已经修改了ImageInput 的onDrop 函数，以便它最终会从我的自定义函数中返回一个url。但是，我想将该返回值设置为 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。

要不然我得把这个组件改写成类组件？

【问题讨论】：

标签： javascript reactjs redux-form react-admin

【解决方案1】：

好的，所以我发现解决方案是创建一个自定义操作并使用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 props。
2. 使用 redux-form 的change 方法来创建带有自定义动作的动作。

不确定这是否是最好的方法，但它确实有效。希望它可以帮助任何尝试在 react-admin 上进行自定义的人。

【讨论】：