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
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>
)
}
pass a function to child from parent
export const ImageUpload = ({onChange}) => {
const onSelectFile = e => {
onChange() //call here
}
}
in parent
const onChange = () => {
}
<ImageUpload
onChange={onChange}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.