React如何清除输入并触发onChange事件

Question

我正在创建一个React组件库，其中包括基本组件和一些逻辑。我已经用可清除按钮包装了经典输入字段。我需要实现_onClearInput，但不知道如何触发值为空字符串的onChange事件。有人能帮我吗？

import React, { ComponentPropsWithoutRef, useState } from 'react';

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

const MyInput = React.forwardRef<HTMLInputElement, MyInputProps>(({
    value,
    onChange,
    ...rest
}, ref) => {

    const [_value, _setValue] = useState(value || '');

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

    const _onClearInput = () => {
        _setValue('');
        // I need trigger onChange event somehow with event.target.value = ''
    }

    return(
        <div className={`input-${_value === '' ? 'is-not' : 'is'}-set`}>
            <input ref={ref} value={_value} onChange={_onChange} {...rest}/>
            <button onClick={_onClearInput}>ClearInput</button>
        </div>
    );
});

export default MyInput;

- Ashwel

Answer 1

我不知道有没有非常规的方法来做到这一点，如果你希望事件具有所有必需的属性，但只要从事件中检索值，你可以轻松地这样做：

if (onChange) {
    onChange({ target: { value: '' } });
}

或者使用TypeScript：

if (onChange) {
    onChange({ target: { value: '' } } as React.ChangeEvent<
        HTMLInputElement | HTMLTextAreaElement
    >);
}

- Lucas Basquerotto