изменить определенное значение формы-редукса из пользовательского обратного вызова функции в реагирующем администраторе - PullRequest
Новая
       30

изменить определенное значение формы-редукса из пользовательского обратного вызова функции в реагирующем администраторе

1 голос
/ 31 октября 2019

Я изменил функцию onDrop для ImageInput, чтобы она в конечном итоге возвращала 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(...), чтобы отправить изменение в избыточную форму. Но здесь my uploadImg представляет собой простую функцию вне контекста реагирования на компоненты и поэтому не может получить доступ к this.

Или же мне пришлось бы переписать этот компонент в компонент класса?

1 Ответ

0 голосов
/ 08 ноября 2019

Хорошо, поэтому я обнаружил, что решение состоит в том, чтобы создать пользовательское действие и отправить действие с помощью метода redux-form *1001*.

Используйте FormDataConsumer, чтобы получить formData и метод отправки. 

+ 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. соберите реквизы dispatch от редукса от FormDataConsumer.
2. реакции-администратора. -form change метод для создания действия с вашим настраиваемым действием.

Не уверен, что это лучший способ, но он обязательно работает. Надеюсь, что это поможет любому, кто пытается с настройкой на реакции-администратора.

...