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

我正在使用 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 的方法，但老实说，我会将它绑定到 state，因为我可以在不使用 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>

使用 ref 的示例（不推荐）：

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>