我正在使用 react Dropzone 組件，我需要進行條件樣式化以顯示檔案是被接受還是被拒絕。它包括在檔案被拒絕時將邊框顏色更改為紅色，在檔案被接受時將邊框顏色更改為藍色。 MyDropzone
我只需要允許 .csv 和 .dat 檔案。它使用接受引數作為 csv 的“application/vnd.ms-excel”。但是，我沒有為 .dat 檔案找到正確的 MIMEType。我嘗試了以下方法：
應用程式/八位位元組流
zz-應用程式/zz-winassoc-dat
應用程式/資料
當我在接受引數中只輸入“.dat”時，輸入限制僅接受 .dat，但條件樣式化不起作用，因為變數 isDragReject 和 isDragAccept 采用不正確的值。
const changeText=(isDragActive,isDragReject,isDragAccept)=>{
return (
<>
<Typography sx={Styles.textBoard}>
{(!isDragActive) && 'Drop files here or click to upload'}
{(isDragActive && !isDragReject) && 'Drop files here'}
{(isDragActive && isDragReject) && 'File not supported'}
</Typography>
</>
)
}
<Dropzone accept={"application/vnd.ms-excel"} onDropAccepted={onUpload}>
{({ getRootProps, getInputProps, isDragActive, isDragReject,isDragAccept }) => (
<Box
{...getRootProps({
//loads the basic style
...Styles.baseStyle,
//change the color in function of the file that
//is being dragged over the area
...(!isDragActive ? Styles.defaultStyle : {}),
...(isDragReject ? Styles.rejectStyle : {}),
...(isDragAccept ? Styles.acceptStyle : {})
})}
>
<CloudUpload className='ico' sx={Styles.uploadIcon}/>
{changeText(isDragActive,isDragReject)}
<input {...getInputProps()}/>
</Box>
)}
</Dropzone>
uj5u.com熱心網友回復：
我發現了問題，所以我來回答。我正在使用的 .dat 的 MIMEType 是未定義的（也許很常見）。因此，在引數接受（希望接受 .csv 和 .dat）中，我只放置了 csv MIMEType 和一個空白（請記住，接受引數接收像“MIMEType1，MIMEType2”這樣的輸入。
所以如下：
<Dropzone accept={'application/vnd.ms-excel, '} onDropAccepted={onUpload}>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/425393.html
標籤：javascript 反应 验证 哑剧类型 反应滴区