如何在图像输入、文件输入、ImageField 或 FileField 的预览中禁用清除按钮

Question

我的创建表单中有 ImageInput 和 ImageField 供预览。

右上角的图片预览有清除按钮，如截图所示

有没有办法禁用这个按钮？或者处理点击事件？

Answer 1

React Admin 没有公开道具或删除该按钮的方法。

唯一的方法是创建自己的 ImageInput 并禁用它，例如在 CSS 中，例如：

// CustomImageInput.js
import compose from 'recompose/compose';
import { withStyles } from '@material-ui/core/styles';
import { addField, translate, FileInput } from 'react-admin';

const styles = {
    root: { width: '100%' },
    dropZone: {
        background: '#efefef',
        cursor: 'pointer',
        padding: '1rem',
        textAlign: 'center',
        color: '#999',
    },
    preview: {},
    removeButton: {
        display: 'none',
    },
};

export class ImageInput extends FileInput {
    static defaultProps = {
        ...FileInput.defaultProps,
        labelMultiple: 'ra.input.image.upload_several',
        labelSingle: 'ra.input.image.upload_single',
    };
}

export default compose(
    addField,
    translate,
    withStyles(styles)
)(ImageInput);

如果您想发布 PR 来公开像 showDeleteButton 这样默认为 true 的道具，我们欢迎您。

如何在图像输入、文件输入、ImageField 或 FileField 的预览中禁用清除按钮

How To Disable Clear Button In The Preview Of ImageInput, FileInput, ImageField, or FileField

admin-on-rest

react-admin