Javascript 在react admin中修改自定义函数回调中的特定redux表单值_Javascript_Reactjs_Redux Form_React Admin

Javascript 在react admin中修改自定义函数回调中的特定redux表单值

javascript reactjs

Javascript 在react admin中修改自定义函数回调中的特定redux表单值,javascript,reactjs,redux-form,react-admin,Javascript,Reactjs,Redux Form,React Admin,我修改了ImageInput的onDrop函数，以便它最终从我的自定义函数返回url。但是，我想将该返回值设置为ImageInput的image值 ... const uploadImg = ( acceptedFiles ) => { return Promise.resolve(uploadImageToServer(file)) .then( url => { // do something ... }) }

我修改了

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>

...

。。。
const uploadImg=（acceptedFiles）=>{
返回Promise.resolve（上传ImageToServer（文件））
。然后（url=>{
//做点什么。。。
})
}
const ProductEdit=（{classes，…props}）=>(
...

这在功能组件中是可能的吗？我在其他答案中看到，可以调用

this.props.change（…）

来发送对redux表单的更改。但是这里我的

uploadImg

是一个与react.component上下文无关的普通函数，因此无法访问

this

或者我必须将此组件重写为类组件吗？

好的，所以我发现解决方案是创建一个自定义操作，并使用

redux form

的

connect

方法分派该操作

使用

FormDataConsumer

获取formData和分派方法

+从'react admin'导入{FormDataConsumer，REDUX_FORM_NAME}；
+从'redux form'导入{change}；
+从“/actions”导入{changeImgUrl}；
...
const uploadImg=（参数，分派）=>{
结果=等待承诺.resolve（您上传的imgfunc（参数））
.然后（res=>返回changeImgUrl（res））
发送（更改（格式名称、图像、结果））
}
const ProductEdit=（{classes，…props}）=>(
{（{formData，dispatch，…rest}）=>(
上传img（参数，调度）}>
)}
...

然后定义一个新操作：

//actions.js
export const CHANGE_IMG_URL='CHANGE_IMG_URL'；
导出常量更改imgurl=img\u url=>({
类型：更改\u IMG\u URL，
网址：img_网址
});

总结：
1.从react管理员的

FormDataConsumer

收集redux的

dispatch

道具
2.使用redux表单的

change

方法使用自定义操作创建操作

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

好的，所以我发现解决方案是创建自定义操作，并使用

redux form

的

connect

方法发送操作

使用

FormDataConsumer