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实例中获取引用，并在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

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

2 个答案: