Question

我一直在尝试创建一个简单的实时搜索应用程序来学习React.js。我能够使用虚拟数据来模拟它，但是在尝试使用url / api中的json时也遇到了麻烦。我不想要任何onClick事件，所以我使用状态更改来搜索。

我将从中获取数据的网址应该是

url ='myurl / api ='+ searchString;

所以我希望在输入内容时收集数据。这可能吗？

如果我可以在不包含任何onClick事件的情况下执行此操作，请告诉我。

这是我的fiddle：

var SearchStock = React.createClass({

  getInitialState: function() {
    return {searchString: '', data : []};
  },

  handleChange: function(e) {
    this.setState({searchString: e.target.value});
  },

  componentDidMount: function() {
    var url = 'myurl/api' + searchString;
    this.serverRequest = $.get(url, function(result) {
      var quote = result;
      this.setState({quote});
    }.bind(this));
  },
  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    var stocks = this.props.items, searchString = this.state.searchString.trim().toLowerCase();
    // var stocks = this.state.data, searchString = this.state.searchString.trim().toLowerCase();

    if (searchString.length > 0) {
      stocks = stocks.filter(function(l) {
        return l[Object.keys(l)[0]]["symbol"].toLowerCase().match(searchString);
      });
    }

    return <div >
      < input type = "text" value = {this.state.searchString} onChange = {this.handleChange} placeholder = "Type here" / >
      < ul > 
      {stocks.map(function(l) {
            return <li > {l[Object.keys(l)[0]]["name"]} < /li>
        })
      } 
      < /ul> 
    < /div>;
  }
});

var stocks = [{"F": {"symbol": "F", "name": "Ford Motor", "bidPrice": 13.41, "askPrice": 13.36}}];

// ReactDOM.render( < SearchStock />,document.getElementById('container'));
ReactDOM.render( < SearchStock items = {stocks}/>, document.getElementById('container'));

我希望得到任何帮助。如果有任何错误，请告诉我。：）

Answer 1

您的示例仅在组件安装时发出搜索请求。这个特定的生命周期事件只会触发一次，当元素首次呈现给DOM时，请参阅：https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount。

您可以通过多种方式处理此类功能，我建议您在handleChange方法中提出搜索请求。这是我们可以访问用户键入的数据的第一点，因此它非常适合您的功能。我还建议对处理程序进行去抖动，以便您不会对用户实际上不打算搜索的字符发出请求。这是一篇关于去抖动的好文章：https://davidwalsh.name/javascript-debounce-function

使用来自url api的react.js进行实时搜索

1 个答案: