输入无效数据时，使用react-bootstrap-typeahead清除inputText

Question

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

我无法想出一个很好的方法来做到这一点。

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

任何建议，将不胜感激

这是我的先行定义

        <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

获取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()
    }
  }