How to display ImageInput src in another component on react-admin?

问题

I'm using react-admin and I want to display the chosen image in another component.

I have already an image on my Edit screen. When I select a new one with ImageInput, I'd like to display it in my <Poster /> component and change the existing image with a new one.

<Poster id="poster" {...props} source="card_image_path" 
label="resources.cards.fields.card_image_path" />

<ImageInput id="imageInput" source="images" accept="image/*">
  <ImageField source="src" title="title" />
</ImageInput>

回答1:

Pass any component, but inside your custom component read the record props.

in this case ImageInput emits src as source

<ImageInput id="imageInput" source="images" accept="image/*">
<CustomComponent source="src" />
</ImageInput>

now CustomComponent will receive props.record

and then you simply read const {src} = this.props.record;

回答2:

I think you will be able to do it with the <FormDataConsumer> element. I've done something similar, showing the original image, except if a new image is selected, show that and hide the original.

<ImageInput source="contents" label="Billede" accept="image/*" mulitple={false}>
    <ImageField source="thumbnail" title="title" />
</ImageInput>

<FormDataConsumer>
   {({formData, dispatch, ...rest}) => {
       if (!formData.contents) {
            return (
                <Labeled label="Original image">
                    <ImageField source="thumbnail" {...rest}/>
                </Labeled>
            );
        }
    }}
</FormDataConsumer>

来源：https://stackoverflow.com/questions/53590879/how-to-display-imageinput-src-in-another-component-on-react-admin

标签

react-admin