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

Question

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

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;

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

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

Answer 1

这是一个 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.createRef

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

    this.typeahead = createRef<Typeahead>();
  }

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

  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)}
      />
    );
  }
}

Refs and the DOM

Answer 2

此更改在 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;