Question

我正在使用react-admin，我想在另一个组件中显示所选的图像。

我的编辑屏幕上已经有图像。当我使用ImageInput选择一个新图像时，我想将其显示在<Poster />组件中，并使用一个新图像来更改现有图像。

<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>

Answer 1

传递任何组件，但在自定义组件内部阅读record道具。

在这种情况下，ImageInput发出src作为来源

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

现在CustomComponent将收到道具。记录

然后您只需阅读const {src} = this.props.record;

Answer 2

我认为您可以使用<FormDataConsumer>元素来做到这一点。我做过类似的操作，显示原始图像，除非选择了新图像，然后显示并隐藏原始图像。

<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>

如何在react-admin的另一个组件中显示ImageInput src？

2 个答案: