Как очистить входы в функцию, используя тип React bootstrap - PullRequest
Новая
       25

Как очистить входы в функцию, используя тип React bootstrap

0 голосов
/ 28 апреля 2020

Я пытаюсь очистить входы в функцию, используя следующий код. 

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;

Когда я пытаюсь использовать этот код для одновременной очистки входных данных, я получаю следующую ошибку: «Свойство typeahead не существует для типа« Данные »».

Может кто-нибудь помочь мне, как определить свойство typeahead и какие изменения нужно сделать, чтобы это работало.

Ответы [ 2 ]

2 голосов
/ 28 апреля 2020

Это проблема с реферируемой ссылкой, и вам просто нужно сначала определить ссылку для использования.

Используя классическое определение: 

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

  handleChange(e) {
    this.typeahead.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)}
      />
    );
  }
}

Ссылка и DOM

0 голосов
/ 28 апреля 2020

Это изменение сработало для меня в машинописи, чтобы очистить ввод с помощью 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;
...