Clear HTML Input Using Typescript-CodePudding

I have a React component, i need clear this input file but still problem in typescript

The left-hand side of an assignment expression may not be an optional property access.

import { IonButton, IonItem, IonLabel, useIonLoading } from '@ionic/react';
import axios from 'axios';
import React, { FormEvent, useRef, useState } from 'react';
import { errorMessage, successMessage } from '../../services/alertService';


interface ModalAddWorksheetState {
    isOpen: boolean;
    dismiss: () => void;
    CheckerId: string;
    regNo: string;
}

const ModalAddWorksheet: React.FC<ModalAddWorksheetState> = ({ isOpen, dismiss, CheckerId, regNo }) => {

const [presentLoading, dismissLoading] = useIonLoading();

const [inspectionPicture, setInspectionPicture] = useState<Blob>();
const inspectionPictureRef = useRef<HTMLInputElement>(null);

const handleImageChange = (e: FormEvent<HTMLInputElement>) => {
    setInspectionPicture(e.currentTarget.files![0]);
}

const handleAddWorksheetDetailTemp = async () => {
    try {

        presentLoading({
            message: 'Loading...'
        });

        const formData = {}
        const response = await axios.post(`${process.env.REACT_APP_HOST}/api`, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });

        if (response.status === 200) {
            await successMessage('Success Add Inspection Item');
            dismissLoading();
            inspectionPictureRef.current?.value = "";
        }
    } catch (err) {
        await errorMessage(err);
        dismissLoading();
    }
}

const handleSubmitWorksheetDetail = async (e: React.FormEvent) => {
    try {
        e.preventDefault();
        await handleAddWorksheetDetailTemp();
    } catch (err) {
        errorMessage(err);
    }
}

return (
    <form onSubmit={handleSubmitWorksheetDetail} encType='multipart/form-data'>
        <IonItem>
            <IonLabel position='stacked'>Inspection Picture</IonLabel>
            <input type={'file'} ref={inspectionPictureRef} onChange={handleImageChange} className="w-full p-2 mt-3 rounded-sm ring-1 ring-slate-300" accept='.png,.jpg,.jpeg' />
        </IonItem>
        <IonButton type='submit' expand='block'>Submit</IonButton>
    </form>
)
}

  export default ModalAddWorksheet;

But this code

inspectionPictureRef.current?.value = "";

return error "The left-hand side of an assignment expression may not be an optional property access.ts(2779)"

CodePudding user response：

Instead of assigning value to "current", you can use the remove function below to clear the data in input field.

inspectionPictureRef.current?.remove();

CodePudding user response：

Thanks for answer my question, So I Add If condition to check inspectionPictureRef.current and solve this problem to clear input file value,

if (inspectionPictureRef.current) {
   inspectionPictureRef.current.value = ""
}

CodePudding user response：

The problem is here inspectionPictureRef.current?.value = "";

As per the MDN docs See reference It is invalid to try to assign to the result of an optional chaining expression. So you should not use ? on the left side while assigning. Try inspectionPictureRef.current.value = "" ////>>>>> without ? on left side Explanation-

const object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment