React父子组件中在onChange事件中传递多个函数的实现方案

要让子组件和父组件的函数在同一onChange事件中执行，只需通过props传递父组件的回调函数，在子组件的事件处理逻辑里完成自身操作后调用这个回调即可，具体步骤如下：

1. 修改子组件，接收父组件的回调 #

给ImageUpload组件添加props参数，接收父组件传入的onChange函数，然后在子组件自己的onSelectFile函数中，完成自身逻辑后调用这个父组件函数：

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

    useEffect(() => {
        if (!selectedFile) {
            setPreview(undefined)
            return
        }

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

        return () => URL.revokeObjectURL(objectUrl)
    }, [selectedFile])

    const onSelectFile = e => {
        if (!e.target.files || e.target.files.length === 0) {
            setSelectedFile(undefined)
            // 调用父组件的回调（可选链语法避免未传回调时报错）
            onChange?.(e)
            return
        }

        setSelectedFile(e.target.files[0])
        // 完成子组件逻辑后，触发父组件的回调
        onChange?.(e)
        // 如果想直接把文件传给父组件，也可以这么写：
        // onChange?.(e.target.files[0])
    }

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

2. 父组件传入自己的处理函数 #

在父组件中定义好需要执行的函数，然后通过onChange props传给子组件：

// 父组件中定义处理函数
const handleImageChange = (e) => {
    // 这里写父组件的逻辑，比如获取文件、发起上传等
    const selectedFile = e.target.files?.[0]
    if (selectedFile) {
        console.log('父组件拿到的文件：', selectedFile)
        // 示例：把文件存到父组件的状态中
        // setParentFile(selectedFile)
    }
}

// 使用子组件时传入函数
<ImageUpload onChange={handleImageChange} />

这样当文件选择框触发onChange事件时，会先执行子组件onSelectFile里的逻辑（更新选中文件、生成预览），再执行父组件handleImageChange里的逻辑，两个函数都会被触发。

内容的提问来源于stack exchange，提问作者Rolanda