reactjs - 输入无效数据时使用 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

使用 callback ref 在 TypeAhead 实例中获取引用，并在 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()
    }
  }