Question

我想使用自定义样式制作输入类型文件，我隐藏输入并使用CSS设置标签样式。有两个问题：

我选择了文件，但coverFileState未定义（如果我删除CSS样式并选择文件，那么一切都很好）。
我想在标签内设置文件名，但是它不起作用。我在handleCoverChange内使用setCoverUploadText设置了文本，但没有效果。

如果您能帮助我解决这个问题，我将非常感谢，谢谢！

const useStyles = makeStyles((theme) => ({
    fileInput: {
        marginBottom: '1em',
        width: '0.1px',
        height: '0.1px',
        opacity: '0',
        overflow: "hidden",
        position: "absolute"
    },
    uploadLabel: {
        fontSize: '1rem',
        cursor: 'pointer',
        color: "gray",
        border: "1px solid gray"
    }
}));


export default function AddingBook(props: ParamsProps) {

    const classes = useStyles();
    const coverFile = useRef(null);
    const [coverFileState, setCoverFile] = useState<string | Blob>();
    const [coverUploadText, setCoverUploadText] = useState("Upload cover photo *");

    const handleSubmit = () => {
        if (coverFileState === undefined) {
            setImageErrorMsg("*Please add cover photo.");
            return;
        }
        api.post('/image/add', JSON.stringify(REST))
            .then(res => {
                uploadCoverPhoto();
                props.close();
            }).catch(err => {
            const errorMsg = APIServices.onError(err);
            showErrorPopup(errorMsg);
        })
    };

    const handleCoverChange = () => {
        // @ts-ignore
        setCoverFile(coverFile.current.files[0]);
        // @ts-ignore
        setCoverUploadText(coverFile.current.files[0].name)
    };

    return (
        <>
            <div>
                <input
                    id="copy-file-upload"
                    type="file"
                    accept="image/*"
                    ref={coverFile}
                    onChange={handleCoverChange}
                    data-testid="inputFile"
                    className={classes.fileInput}
                />
                <label className={classes.uploadLabel} htmlFor="copy-file-upload">{coverUploadText}</label>
            </div>
        </>
    );

Answer 1

尝试为输入文件和标签用“样式”替换“ className”。希望对您有帮助

编辑：当我将样式设置为：

时，它对我有用

const useStyles = {
    fileInput: {
        marginBottom: '1em',
        width: '0.1px',
        height: '0.1px',
        opacity: '0',
        overflow: "hidden",
        position: "absolute"
    },
    uploadLabel: {
        fontSize: '1rem',
        cursor: 'pointer',
        color: "gray",
        border: "1px solid gray"
    }
};

并在返回中将其用作：

....
<label style={useStyles.uploadLabel} htmlFor="copy-file-upload">{coverUploadText}</label>
....

输入文件的标签未更新状态

1 个答案: