Question

我正努力解决的问题是，每当我单击@Entity @Table(name = "applicationDocuments") public class ApplicationDocument { @Id @GeneratedValue(strategy = GenerationType.AUTO) @Column(name = "id", nullable = false) private Long id; @ManyToOne() @JoinColumn(name = "applicationid") @JsonBackReference @Audited private Application application; @Audited private String file; }时，我仍然希望能够将我自己的注意力集中在输入字段上并在其中输入内容。我应该看到输入className与budget-glyph-clear样式相对应，而输入应该被聚焦，但是我看不到输入的插入符号（我无法输入）

这是我的FormControl

formControlDisplayStyle

有人可以阐明为什么我无法在聚焦场上键入或看到插入符号吗？

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输入集中但无法键入

1 个答案: