Ввод React-Bootstrap сфокусирован, но не может печатать

Question

Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я нажимаю на budget-glyph-clear, я все еще хочу иметь возможность сфокусироваться (как и я) на поле ввода и ввести его. Я вижу, что input className соответствует стилю formControlDisplayStyle, когда ввод должен быть сфокусирован, но я не вижу каретки на вводе для ввода (что я не могу)

Вот мой FormControl

            <InputGroup className={formControlDisplayStyle}>
                <FormControl 
                    className='budget-input-field'
                    pattern='[0-9]*'
                    type='text'
                    placeholder={this.props.placeholder}
                    onChange={this.onInputChange}
                    value={this.props.value}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    autoFocus={this.props.focused}
                />

                <InputGroup.Addon className='clear-sign budget-addon' style={hideClearButton}>
                    <div className='budget-glyph budget-glyph-clear' onClick={this.onClearClick} />
                </InputGroup.Addon>

            </InputGroup>

Может ли кто-то пролить свет на то, почему я не могу напечатать или увидеть курсор на сфокусированном поле?

Answer 1

Хорошо, после некоторой борьбы я понял, что происходит. Я также попытался добавить ref согласно многим предложениям поиска Google, но ничего.

Следующий код фактически оставил бы фокус ввода направленным на мою волю!

private input: HTMLInputElement;
public componentDidUpdate() {
    if (this.props.focused) {
        this.input.focus();
    }
}

Метод рендеринга

<InputGroup className={formControlDisplayStyle}>
    <FormControl 
        className='budget-input-field'
        pattern='[0-9]*'
        type='text'
        placeholder={this.props.placeholder}
        onChange={this.onInputChange}
        value={this.props.value}
        onFocus={this.onFocus}
        onBlur={this.onBlur}
        inputRef={this.updateInputRef}
    />

    <InputGroup.Addon className='clear-sign budget-addon' style={hideClearButton}>
        <div className='budget-glyph budget-glyph-clear' onClick={this.onClearClick} />
    </InputGroup.Addon>

</InputGroup>

приватный метод с магией

private updateInputRef = (ref: HTMLInputElement) => {
    this.input = ref;
}