React可清空Input组件实现时如何触发带空值的onChange事件

你需要的效果是：点击清空按钮的行为，和用户手动删除完输入框内容触发的原生onChange完全一致，父组件拿到的事件结构、event.target.value都和原生输入场景没有区别。

前置代码修正 #

原代码目前有两个逻辑隐患，会导致清空功能异常，先调整：

1. 没有兼容受控/非受控两种组件使用模式：如果父组件传了value作为受控属性，内部自行维护的_value不会和外部传入的value同步，会出现清空后外部没更新状态、组件重渲染时旧值回退的问题
2. 内部没有持有真实input DOM的引用，构造事件/触发原生事件时无法拿到正确的节点

修正后的基础代码调整如下：

• 新增内部引用存储真实input节点，同时合并forwardRef的透传逻辑，不影响父组件拿input实例
• 加副作用监听外部传入的value，同步到内部状态，兼容受控场景

import React, { ComponentPropsWithoutRef, useState, useRef, useCallback, useEffect } from 'react';

export interface MyInputProps extends ComponentPropsWithoutRef<'input'> {
}

const MyInput = React.forwardRef<HTMLInputElement, MyInputProps>(({
    value,
    onChange,
    ...rest
}, ref) => {
    // 新增内部input引用
    const innerInputRef = useRef<HTMLInputElement>(null);
    const [_value, _setValue] = useState(value || '');

    // 合并ref：既支持内部拿节点，也支持父组件透传ref
    const setInputRef = useCallback((node: HTMLInputElement | null) => {
        innerInputRef.current = node;
        if (typeof ref === 'function') ref(node);
        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
    }, [ref]);

    // 同步外部受控value到内部状态
    useEffect(() => {
        if (value !== undefined) _setValue(value);
    }, [value]);

    const _onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        _setValue(event.target.value);
        if(onChange) onChange(event);
    }

两种_onClearInput实现方案 #

方案1：原生事件触发（推荐，完全对齐原生行为） #

直接修改input DOM的value值，再手动触发原生input事件，React会自动捕获并生成标准的合成onChange事件，不需要手动构造事件对象，完全规避模拟事件的结构遗漏问题：

const _onClearInput = () => {
    const inputNode = innerInputRef.current;
    if (!inputNode) return;

    // React 16+ 中修改input value需要调用原生setter才能触发事件
    const nativeValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype,
        'value'
    )?.set;
    nativeValueSetter?.call(inputNode, '');

    // 触发原生input事件，React会自动执行onChange回调
    inputNode.dispatchEvent(new Event('input', { bubbles: true }));
}

这个方案的好处是父组件拿到的event就是React原生生成的合成事件，和用户手动输入触发的事件没有任何差异，兼容所有父组件的写法。

方案2：模拟事件调用（适合不想操作DOM的场景） #

复用已有的_onChange逻辑，传入结构对齐的模拟事件即可，足够应对大多数业务场景：

const _onClearInput = () => {
    const inputNode = innerInputRef.current;
    if (!inputNode) return;

    // 构造符合React ChangeEvent结构的模拟事件，补全父组件常用属性
    const fakeEvent = {
        target: { ...inputNode, value: '' },
        currentTarget: { ...inputNode, value: '' },
        persist: () => {},
        preventDefault: () => {},
        stopPropagation: () => {},
        nativeEvent: new Event('change', { bubbles: true })
    } as unknown as React.ChangeEvent<HTMLInputElement>;

    // 直接复用原有onChange逻辑，自动触发内部setValue和外部onChange
    _onChange(fakeEvent);
}

注意事项 #

如果父组件是受控使用模式（传了value和onChange），需要在父组件的onChange回调里同步把自身的状态值更新为空字符串，配合内部的同步副作用逻辑，才不会出现清空后旧值回退的问题。

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