我一直在尝试创建一个简单的实时搜索应用程序来学习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'));
我希望得到任何帮助。如果有任何错误,请告诉我。 :)
答案 0 :(得分:3)
您的示例仅在组件安装时发出搜索请求。这个特定的生命周期事件只会触发一次,当元素首次呈现给DOM时,请参阅:https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount。
您可以通过多种方式处理此类功能,我建议您在handleChange
方法中提出搜索请求。这是我们可以访问用户键入的数据的第一点,因此它非常适合您的功能。我还建议对处理程序进行去抖动,以便您不会对用户实际上不打算搜索的字符发出请求。这是一篇关于去抖动的好文章:https://davidwalsh.name/javascript-debounce-function