清除沒有Jquery或硬編碼元素的文本框

Question

我有一個文本框，當用戶輸入前三個字符時，它將下拉一列自動完成選項以填充文本框。點擊其中一個自動填充選項後，我希望文本框自行清除。下面是該元素看起來像現在：

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

我使用的反應。這裏是我的代碼以清除文本框目前的樣子：

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

實施例使用狀態：

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>