要素をJqueryまたはハードコーディングしないテキストボックスをクリアする

Question

ユーザーが最初の3文字を入力すると、テキストボックスに入力するオートコンプリートオプションのリストをドロップダウンするテキストボックスがあります。オートコンプリートオプションの1つをクリックすると、テキストボックスがクリアされます。ここに、その要素が今のように見えます：

<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> 

私はReactを使用しています。

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

}

まず第一に、私は実際にあるチェックボックスをクリアしているjQueryの行を削除する必要があります。ここにテキストボックスをクリアするために私のコードは、現在のように見えるものです。 this.userInput.value=""で置き換えると効果がなく、どちらもevent.target.value=""ではないことがわかりました。次に、Jquery行$('#userFilterTypeahead').on( 'selectitem.uk.autocomplete',...を削除したいと思いますが、selectitem.uk.autocompleteイベントが発生したときにテキストをクリアするようトリガーする必要があります。だから、私はこのJqueryを置き換えたいと思うし、単一のテキストボックスをクリアすると複雑さに困惑しています。

Answer 1

ここではrefを使用する方法ですが、refを使用せずに簡単にこれを行うことができるので正直にそれをバインドします。要素をフォーカスする必要がある場合を除いては使用しないでください。私は両方の例を挙げました。

オートコンプリートに多く依存する場合は、事前に構築されたモジュールを使用することをおすすめします。しかし、私が下にリンクしている例は非常に似ていますが、データを受け入れるために作成されています。クエリが一致したときに入力フィールドの下に表示される結果のリストをレンダリングするだけです。状態を使用してhttps://github.com/moroshko/react-autosuggest

例：REF（推奨しない）を使用して

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>

例：

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>