React中useRef的current有哪些方法？change事件是否有对应调用方法？

一、useRef获取的DOM元素可调用的方法总数？ #

这些方法并非React专属，而是原生DOM元素的内置API，数量随元素类型不同而变化（比如input、button、div的可用方法差异很大）。常见的实用方法包括：

• 通用交互类：focus()、blur()、click()、scrollIntoView()
• 表单元素专属：select()（选中文本内容）、setSelectionRange()（设置文本选中范围）、reset()（表单重置，仅form元素可用）、submit()（表单提交，仅form元素可用）
• 事件/状态操作：toggleAttribute()（切换元素属性）、dispatchEvent()（手动触发任意事件）

如果想查看某个元素的全部可用方法，直接在浏览器控制台打印inputRef.current，就能看到它原型链上的所有API。

二、change/onChange有没有对应的可调用方法？ #

没有直接的change()方法。onChange是React封装的事件，对应原生的change事件——要触发它，需要手动创建并分发事件，或者修改元素值后触发事件。

针对你的文件上传场景的解决方案 #

你当前的代码调用click()只是唤起系统文件选择框，无法直接触发拖拽后的文件上传逻辑。正确的做法是从drop事件中取到文件，手动赋值给input并触发change事件：

<CardMedia
    component="img"
    image={image}
    alt={image}
    onDrop={(e) => {
        e.preventDefault();
        // 获取拖拽的文件列表
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            // 给隐藏的input赋值文件
            inputRef.current.files = files;
            // 手动创建并分发change事件，触发dropImage回调
            const changeEvent = new Event('change', { bubbles: true });
            inputRef.current.dispatchEvent(changeEvent);
        }
    }}
    onDragOver={dragOver}
    onDragEnter={dragEnter}
    onDragLeave={dragLeave}
/>

这样就能直接通过拖拽完成文件上传，无需唤起系统文件选择框。

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