输入无效数据时使用inputText -bootstrap-typeahead清除类型

Question

我正在尝试使用react-bootstrap-typeahead验证选择，并在移动到页面的另一个区域时清除无效的输入文本。

我想不出一个好办法来做这件事。

Typeahead组件的onBlur不会在正确的时间触发以进行验证和清除。

如有任何建议，我们将不胜感激

下面是我的typeahead定义

        <Typeahead  bsSize="sm"
                    defaultSelected = {this.props.options.slice(selectedIndex)}
                    clearButton
                    labelKey="roomNumber"
                    options={this.props.options}
                    placeholder={this.props.placeholder}                          
                    name={this.props.nameId}
                    ref={ref => this.roomChoice = ref}
                    onChange={this.onChangeHandler.bind(this)}
                    onInputChange={this.onInputChangeHandler.bind(this)}
                    onBlur={this.onBlurHandler.bind(this)} 
                    onFocus={this.onFocusHandler.bind(this)} 
                  />

下面是我的onBlur函数：

onBlurHandler(event)
{   
         if (this.roomInputText)
        {
            if (!this.roomSelectedOption)
            {
                this.roomChoice.getInstance().clear()
            }
        }

}

如果有人输入文本，onBlur不会在正确的时间触发，使我无法选择一个选项。

Answer 1

使用callback ref在TypeAhead实例中获取ref，并在onchange事件调用中使用。

<div>
  <Typeahead
    options={[...]}
    ref={(ref) => this._typeahead = ref}
    onInputChange={this.onInputChangeSelection}
 />
</div>




onInputChangePartsSelection = (value) => {
    if (value) {
    const instance = this._typeahead.getInstance()
    instance.clear()
    instance.focus()
    }
  }

Answer 2

我使用的是AsyncTypeAhead，必须执行以下操作。

var asyncTypeAhead = typeAhead as AsyncTypeahead;
asyncTypeAhead.getInstance().clear();

我发现这篇文章很有用的https://github.com/ericgio/react-bootstrap-typeahead/issues/359