मैंने ImageInput के onDrop फ़ंक्शन को संशोधित किया है ताकि यह अंततः मेरे कस्टम फ़ंक्शन से एक url लौटाए। हालांकि, मैं उस वापसी मान को image के ImageInput के मान पर सेट करना चाहता हूं।

...

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(...) को कॉल कर सकते हैं। लेकिन यहां मेरा uploadImg, React.component के संदर्भ से बाहर एक सादा कार्य है और इसलिए this तक पहुंचने में असमर्थ है।

या फिर मुझे इस घटक को कक्षा घटक में फिर से लिखना होगा?

1
suvtfopw 31 अक्टूबर 2019, 13:12

1 उत्तर

सबसे बढ़िया उत्तर

ठीक है तो मैंने पाया कि समाधान एक कस्टम कार्रवाई बनाना और redux-form की connect विधि के साथ कार्रवाई भेजना था।

फॉर्मडाटा और प्रेषण विधि प्राप्त करने के लिए FormDataConsumer का प्रयोग करें।

+ 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. प्रतिक्रिया-व्यवस्थापक के FormDataConsumer से redux के dispatch प्रॉप्स एकत्र करें।
2. अपनी कस्टम क्रिया के साथ क्रिया बनाने के लिए redux-form की change विधि का उपयोग करें।

सुनिश्चित नहीं है कि यह सबसे अच्छा तरीका है लेकिन यह निश्चित रूप से काम करता है। आशा है कि यह प्रतिक्रिया-व्यवस्थापक पर अनुकूलन के साथ प्रयास करने वाले किसी भी व्यक्ति की सहायता करता है।

0
suvtfopw 8 नवम्बर 2019, 02:05