reactjs - React cách xóa input và kích hoạt sự kiện onChange

Tôi đang tạo thư viện component React với các component cơ bản riêng và một số logic ở trên đó. Tôi đã bọc trường input cổ điển với nút xóa. Tôi cần triển khai _onClearInput, nhưng tôi không biết làm thế nào để kích hoạt sự kiện onChange với giá trị chuỗi rỗng. Có ai có thể giúp tôi không?

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;

Câu trả lời #1

Tôi không biết cách nào không tạm bợ để làm điều đó nếu bạn muốn sự kiện có tất cả các thuộc tính cần thiết, nhưng miễn là chỉ lấy giá trị từ sự kiện, bạn có thể làm điều đó dễ dàng bằng cách:

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

Hoặc với typescript:

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