使用 typeahead 提交后清除输入数据

【问题标题】：Clear the input data after submit using typehead使用 typeahead 提交后清除输入数据
【发布时间】：2019-10-20 09:38:06
【问题描述】：

我的 Typeahead 组件：

<Typeahead
              ref="SubjectTypeahead"
              placeholder="Search Subjects"
              onChange={this.onSearchSubjects}
              options={subjectNames}/>

我的 onChange 函数：

  onSearchSubjects = (values) => {
    if (values.length > 0) {
      this.refs.SubjectTypeahead.getInstance().clear()
      this.props.onSearchSubjects(values[0])
    }
  }

当从预输入中选择一个值时，我的 onChange 方法会被调用，但选择的值不会被清除。

知道我做错了什么吗？

谢谢

【问题讨论】：

标签： reactjs

【解决方案1】：

我的问题现在解决了

公共方法要访问组件的公共方法，请将 ref 添加到您的 typeahead 实例并从给定的处理程序访问 ref：

<div>
  <Typeahead
    ...
    ref={(typeahead) => this.typeahead = typeahead}
  />
  <button onClick={() => this.typeahead.getInstance().clear()}>
    Clear Typeahead
  </button>
</div>

请注意，您必须使用 getInstance 来获取 typeahead 实例。

blur()

提供一种程序化方式来模糊输入。

clear()

提供一种编程方式来重置组件。调用该方法将清除文本和选择。

focus()

提供一种编程方式来集中输入。

getInput()

提供对组件输入节点的访问。

【讨论】：