Question

我有一个文本框，一旦用户输入前三个字符，就会下拉一个自动填充选项列表以填充文本框。点击其中一个自动填充选项后，我希望文本框能够自行清除。以下是该元素现在的样子：

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

我正在使用React。以下是我清除文本框的代码：

this.userInput.value=""

}

首先，我需要删除实际清除复选框的Jquery行。我发现用event.target.value=""替换它没有效果，$('#userFilterTypeahead').on( 'selectitem.uk.autocomplete',...也没有效果。其次，我想删除Jquery行selectitem.uk.autocomplete但我仍然需要在<asp:LinkButton id="btnHide" runat="server" CssClass="blah" CommandName="Hide" data-toggle="collapse" data-target="#dvWP">事件发生时触发我的文本清除。所以，我想替换这个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>

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

清除没有Jquery的文本框或硬编码元素

1 个答案: