React-Bootstrap 输入聚焦但无法输入

Question

我正在努力解决的问题是，每当我单击 budget-glyph-clear 时，我仍然希望能够（我是）专注于输入字段并在其中输入内容。当输入应该被聚焦时，我看到输入类名对应于 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

好吧，经过一番挣扎，我意识到发生了什么事。我也尝试根据许多 google 搜索建议添加 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;
}

React-Bootstrap 输入聚焦但无法输入

React-Bootstrap input focused but cannot type

input

caret

autofocus

react-bootstrap