如何在图像输入，文件输入，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的道具，那么你会受到欢迎。