Input React引导输入集中，但无法输入

我一直在努力解决的问题是，每当我点击预算图示符clear时，我仍然希望能够将注意力集中到输入字段并在其中输入。当输入应该被聚焦时，我可以看到输入类名对应于

formControlDisplayStyle

样式，但是我没有看到输入类型上的插入符号（我无法看到）

这是我的表单控件

            <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>

---

有人能解释一下为什么我不能在聚焦区域上键入或看到插入符号吗？

好的，经过一番挣扎，我意识到发生了什么。我还尝试根据许多谷歌搜索建议添加

ref

，但没有

下面的代码实际上将把输入集中在我的意愿上

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;
}