在父子组件中反应多个 function

Question

I'm trying to pass 2 functions in on onChange event.

I know how to do this in the same file but I'm struggling to do it when I have one function in the child and another one in the parent component.

This is my child component:

export const ImageUpload = () => {
    const [selectedFile, setSelectedFile] = useState()
    const [preview, setPreview] = useState()

    // create a preview as a side effect, whenever selected file is changed
    useEffect(() => {
        if (!selectedFile) {
            setPreview(undefined)
            return
        }

        const objectUrl = URL.createObjectURL(selectedFile)
        setPreview(objectUrl)

        // free memory when ever this component is unmounted
        return () => URL.revokeObjectURL(objectUrl)
    }, [selectedFile])

    const onSelectFile = e => {
        if (!e.target.files || e.target.files.length === 0) {
            setSelectedFile(undefined)
            return
        }

        // I've kept this example simple by using the first image instead of multiple
        setSelectedFile(e.target.files[0])
    }

    return (
        <div>
            <input type='file'
                onChange={onSelectFile}
            />
            {selectedFile && <img src={preview} />}
        </div>
    )
}

My parent is:

<ImageUpload 
   // onChange= add an extra function here
/>

How I should add an extra function on onChange on the parent

Answer 1

You can pass function in props like this

<ImageUpload 
  changeFunction = {your function here}
/>

and accept the props and use two function onChange like this.

export const ImageUpload = (props) => {
    const [selectedFile, setSelectedFile] = useState()
    const [preview, setPreview] = useState()

    // create a preview as a side effect, whenever selected file is changed
    useEffect(() => {
        if (!selectedFile) {
            setPreview(undefined)
            return
        }

        const objectUrl = URL.createObjectURL(selectedFile)
        setPreview(objectUrl)

        // free memory when ever this component is unmounted
        return () => URL.revokeObjectURL(objectUrl)
    }, [selectedFile])

    const onSelectFile = e => {
        if (!e.target.files || e.target.files.length === 0) {
            setSelectedFile(undefined)
            return
        }

        // I've kept this example simple by using the first image instead of multiple
        setSelectedFile(e.target.files[0])
    }

    return (
        <div>
            <input type='file'
                onChange={onSelectFile; props.changeFunction}
            />
            {selectedFile && <img src={preview} />}
        </div>
    )
}

Answer 2

pass a function to child from parent

export const ImageUpload = ({onChange}) => {

    const onSelectFile = e => {

       onChange() //call here
    }

}

in parent

const onChange = () => {
  
}

<ImageUpload 
   onChange={onChange}
/>