Reactjs 如何使用React bootstrap typeahead清除函数中的输入

我正在尝试使用以下代码清除函数中的输入

import {Typeahead} from 'react-bootstrap-typeahead';

type requestState={
  value:string[]
}

class Data extends Component<{},requestState> {
  constructor(props){  
    super(props);  
    this.state = {  
      value: [],
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.typeahead.getInstance().clear();
  }

  render() {
    return(
      <Typeahead
        ref={(ref) => this.typeahead = ref}
        id="data"
        labelKey="data"
        multiple={true}
        options={this.state.values}
        placeholder="Choose a data.."
        onChange={(e) => this.handleChange(e)}
      />
    );
  }
}

export default Data;

从'react bootstrap Typeahead'导入{Typeahead}；
类型请求状态={
值：字符串[]
}
类数据扩展组件{
构造器（道具）{
超级（道具）；
this.state={
值：[]，
}
this.handleChange=this.handleChange.bind（this）；
}
手变（e）{
this.typeahead.getInstance（）.clear（）；
}
render（）{
返回(
this.typeahead=ref}
id=“数据”
labelKey=“数据”
多重={true}
选项={this.state.values}
占位符=“选择一个数据…”
onChange={（e）=>this.handleChange（e）}
/>
);
}
}
导出默认数据；

当我尝试使用此代码立即清除输入时，我得到以下错误：“类型“Data”上不存在属性“typeahead”

---

有人可以帮助我如何定义typeahead属性以及如何更改才能使其正常工作。

这是react ref问题，您只需先定义ref以供使用

使用经典定义：

class Data extends Component<{},requestState> {
  constructor(props){  
    super(props);  
    this.state = {  
      value: [],
    }
    this.handleChange = this.handleChange.bind(this);

    this.typeahead = null;
  }

  handleChange(e) {
    this.typeahead.getInstance().clear();
  }

  render() {
    return(
      <Typeahead
        ref={(ref) => this.typeahead = ref}
        id="data"
        labelKey="data"
        multiple={true}
        options={this.state.values}
        placeholder="Choose a data.."
        onChange={(e) => this.handleChange(e)}
      />
    );
  }
}

---

这是react ref问题，您只需先定义ref以供使用

使用经典定义：

class Data extends Component<{},requestState> {
  constructor(props){  
    super(props);  
    this.state = {  
      value: [],
    }
    this.handleChange = this.handleChange.bind(this);

    this.typeahead = null;
  }

  handleChange(e) {
    this.typeahead.getInstance().clear();
  }

  render() {
    return(
      <Typeahead
        ref={(ref) => this.typeahead = ref}
        id="data"
        labelKey="data"
        multiple={true}
        options={this.state.values}
        placeholder="Choose a data.."
        onChange={(e) => this.handleChange(e)}
      />
    );
  }
}

---

我在typescript中使用React Bootstrap Typeahead清除输入，这一更改对我起到了作用

 import React, { Component } from 'react';
 import {Typeahead} from 'react-bootstrap-typeahead';

 class Data extends Component<{},requestState> {
 typeahead = React.createRef<Typeahead>();
 constructor(props){  
 super(props);  
   this.state = {  
    value: [],
   }
   this.handleChange = this.handleChange.bind(this);

   }

  handleChange(e) {
    this.typeahead.current.state.selected= []
  }

  render() {
   return(
    <Typeahead
    ref={this.typeahead}
    id="data"
    labelKey="data"
    multiple={true}
    options={this.state.values}
    placeholder="Choose a data.."
    onChange={(e) => this.handleChange(e)}
    />
  );
 }
}
export default Data;

import React，{Component}来自'React'；
从'react bootstrap Typeahead'导入{Typeahead}；
类数据扩展组件{
typeahead=React.createRef（）；
构造器（道具）{
超级（道具）；
this.state={
值：[]，
}
this.handleChange=this.handleChange.bind（this）；
}
手变（e）{
this.typeahead.current.state.selected=[]
}
render（）{
返回(
这个.handleChange（e）}
/>
);
}
}
导出默认数据；

我在typescript中使用React Bootstrap Typeahead清除输入，这一更改对我起到了作用

 import React, { Component } from 'react';
 import {Typeahead} from 'react-bootstrap-typeahead';

 class Data extends Component<{},requestState> {
 typeahead = React.createRef<Typeahead>();
 constructor(props){  
 super(props);  
   this.state = {  
    value: [],
   }
   this.handleChange = this.handleChange.bind(this);

   }

  handleChange(e) {
    this.typeahead.current.state.selected= []
  }

  render() {
   return(
    <Typeahead
    ref={this.typeahead}
    id="data"
    labelKey="data"
    multiple={true}
    options={this.state.values}
    placeholder="Choose a data.."
    onChange={(e) => this.handleChange(e)}
    />
  );
 }
}
export default Data;

import React，{Component}来自'React'；
从'react bootstrap Typeahead'导入{Typeahead}；
类数据扩展组件{
typeahead=React.createRef（）；
构造器（道具）{
超级（道具）；
this.state={
值：[]，
}
this.handleChange=this.handleChange.bind（this）；
}
手变（e）{
this.typeahead.current.state.selected=[]
}
render（）{
返回(
这个.handleChange（e）}
/>
);
}
}
导出默认数据；

非常感谢Drew。。。你帮我解决了这个问题！！花几个小时在这上面。API已更改为

ref.current.focus（）

。如果您得到

这不是一个函数

错误，那么可能需要升级软件包真的感谢Drew。。。你帮我解决了这个问题！！花几个小时在这上面。API已更改为

ref.current.focus（）

。如果您得到

这不是一个函数

错误，那么可能需要升级软件包