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

Question

我的 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 方法，但所选值不会被清除。

知道我做错了什么吗？

谢谢

Answer 1

我的问题现在使用

解决了

Public 方法要访问组件的 public 方法，请将 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()

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

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

Clear the input data after submit using typehead

reactjs