清除没有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>