Effacer la zone de texte sans Jquery ou coder en dur un élément

Question

J'ai une zone de texte qui déroulera une liste d'options de saisie semi-automatique pour remplir la zone de texte une fois que l'utilisateur entre les trois premiers caractères. En cliquant sur l'une des options de saisie semi-automatique, je veux que la zone de texte s'efface automatiquement. Voici à quoi ressemble cet élément:

<label 
     className="searchSecondary_userFilterFacet" 
     hidden={!this.state.isExpanded} 
    > 
     <div 
     className="data-uk-autocomplete" 
     id="userFilterTypeahead" 
     ref={elem => (this.userFilterTypeahead = elem)} 
     > 
     <input 
      id="textInput_userSearch" 
      onKeyUp={this._handleNewUser} 
      placeholder="Search Users" 
      type="text" 
      ref={input => (this.userInput = input)} 
     /> 
     </div> 
     {userModifiers} 
    </label> 

J'utilise React. Voici ce que mon code pour effacer la zone de texte ressemble actuellement:

componentDidMount() { 
let element = ReactDOM.findDOMNode(this.userFilterTypeahead); 

//bind selection event for user filter autocompletion uikit 
$('#userFilterTypeahead').on(
    'selectitem.uk.autocomplete', 
    function(event, data, acobject) { 
    $('#textInput_userSearch').val(''); 
    this._editUsersBuffer(data.value, true, true); 
    }.bind(this) 
); 

}

D'abord et avant tout je dois supprimer la ligne Jquery qui dégageait effectivement la case à cocher. J'ai trouvé que le remplacer par this.userInput.value="" n'avait aucun effet et event.target.value="" non plus. Deuxièmement, je voudrais supprimer la ligne Jquery $('#userFilterTypeahead').on( 'selectitem.uk.autocomplete',... mais je dois encore déclencher mon effacement de texte lorsque l'événement selectitem.uk.autocomplete se produit. Donc, je voudrais remplacer ce Jquery et je suis déconcertée par la complexité qui vient avec l'effacement d'une seule zone de texte.

Answer 1

Voici une méthode utilisant ref, mais je le lierais honnêtement à l'état puisque vous pouvez facilement faire cela sans utiliser ref et c'est généralement une bonne pratique pour éviter de l'utiliser sauf si vous avez besoin de focaliser les éléments. J'ai inclus un exemple pour les deux.

Si vous comptez beaucoup sur l'auto-complétion, je vous suggère d'utiliser un module pré-construit. Mais l'exemple que j'ai lié ci-dessous est très similaire mais il a été créé pour accepter des données. Cela affichera simplement une liste des résultats affichés sous le champ de saisie lorsqu'une requête correspond. https://github.com/moroshko/react-autosuggest

Exemple d'utilisation État:

class App extends React.Component { 
 
    state = { 
 
    query: '', 
 
    } 
 
    clearInput =() => this.setState({ query: "" }); 
 
    setQuery = (evt) => this.setState({ query: evt.target.value }); 
 
    mockSelection =() => { 
 
    if (this.state.query !== '') { 
 
     return <div onClick={this.clearInput}>Click me to clear input</div>; 
 
    } 
 
    return null; 
 
    } 
 
    render(){ 
 
    return (
 
     <div> 
 
     <input 
 
      type="text" 
 
      placeholder="Please enter a query" 
 
      value={this.state.query} 
 
      onChange={this.setQuery} 
 
     /> 
 
     {this.mockSelection()} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Exemple d'utilisation ref (non recommandé):

class App extends React.Component { 
 
    state = { 
 
    query: '', 
 
    } 
 
    clearInput =() => this.inputQuery.value = ""; 
 
    setQuery = (evt) => this.setState({ query: evt.target.value }); 
 
    mockSelection =() => { 
 
    if (this.state.query !== '') { 
 
     return <div onClick={this.clearInput}>Click me to clear input</div>; 
 
    } 
 
    return null; 
 
    } 
 
    render(){ 
 
    return (
 
     <div> 
 
     <input 
 
      type="text" 
 
      ref={input => this.inputQuery = input} 
 
      placeholder="Please enter a query" 
 
      value={this.state.query} 
 
      onChange={this.setQuery} 
 
     /> 
 
     {this.mockSelection()} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>