Блог

Я создаю библиотеку компонентов 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;