По ссылке есть живой пример: https://stackblitz.com/edit/ashok-reddy?file=myform.tsx,package.json,file.tsx
When user click on select file button to up load the file ,button was not opening to upload the file
2.When user drag and drop the file was able to uploading the file
3.Therefore issue was here button was not opening to upload the file
Текущее поведение:
When user click on select file button to up load the file ,button was not opening to upload the file
below screenshot shows when user click on select file button*
When user drag and drop the file was able to uploading the file 👍
below screenshot shows when user drag and drop the file was able to uploading the file.
Ожидаемое поведение:
When user click on select file button to up load the file ,it should able to open to upload the file successfully .
const mission = async (formdata: any) => {
const encontersHttpService = new EncontersHttpService();
return await encontersHttpService.post<any, unknown>(URL, formdata, {}, true).then(response => response).catch(error => console.info(error.message))
}
export const OnSubmit = () => {
return useMutation<any, Error, any>({
mutationKey: [ISSION],
mutationFn: (formdata: any) => mission(formdata)
})
}
const { mutateAsync, isPending} = OnSubmit();
mutateAsync(formData, {
onSuccess: (data) => {
if (!isPending) {
}
},
onError: (error) => {
console.info(error.message)
},
})
When user click on select file button to up load the file ,it should able to open to upload the file successfully .
🤔 А знаете ли вы, что...
React поддерживает однонаправленный поток данных (unidirectional data flow) для предсказуемого управления состоянием.
Я не уверен, почему вы передаете 3 ссылки на компонент <TextField /> в своем fileupload.tsx файле, поскольку при нажатии кнопки «Выбрать файл» вы запускаете fileInputRef.current?.click() скрипт.
Таким образом, вы можете изменить ссылку на компонент <TextField />, чтобы вместо этого получать только fileInputRef.
<TextField
type = "file"
onChange = {handleFileChange}
style = {{ display: 'none' }}
inputRef = {fileInputRef} // Changed this line
/>
Если вы хотите, чтобы при нажатии на компонент <Paper /> открывался диалог с файлом, добавьте событие onClick.
<Paper
elevation = {isDragging ? 6 : 1}
sx = {{ ...styles }}
onDragOver = {handleDragOver}
onDragEnter = {handleDragEnter}
onDragLeave = {handleDragLeave}
onDrop = {handleDrop}
onClick = {() => fileInputRef.current?.click()} // added this line
>
{children}
</Paper>
Если вы реализуете открытие диалогового окна при нажатии <Paper />, убедитесь, что у вас есть оболочка div вокруг вашего <Box /> компонента, которая не позволит открывать диалоговое окно при нажатии на уже выбранную область файла.
{selectedFile && (
<div onClick = {(e) => e.stopPropagation()}>
<Box>{children}</Box>
</div>
)}