我正在尝试为ReactJS中的国家/地区typeahead
创建组件。我使用Bloodhound
,
但是当我尝试时,它总是给我一个错误:
typeahead.bundle.js:374未捕获的TypeError:this._send不是函数
它甚至没有引起我的远程服务器中的url请求
如果我将来源更改为本地Bloodhound来源,则效果很好。
这里是代码:
class TypeaheadCountry extends React.Component {
constructor(props){
super(props);
this.inputText = React.createRef();
this.handleChange = this.handleChange.bind(this);
this.handleSelected = this.handleSelected.bind(this);
}
componentDidMount(){
/* for local source, it works well
var src = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace(['id','name']),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{name:'UNITED STATES',id:'US'},
{name:'CANADA',id:'CA'},
]
});
*/
/* but for remote source, always give me this error:
typeahead.bundle.js:374 Uncaught TypeError: this._send is not a function
at Transport._get (typeahead.bundle.js:374)
at later (typeahead.bundle.js:113)
*/
var src = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/country/typeahead?q=%QUERY',
wildcard: '%QUERY'
},
});
src.initialize();
this.$el = $(this.inputText.current);
this.$el.typeahead({
hint: false,
highlight: false,
minLength: 1
},{
name: 'country-list',
source: src,
display: 'name',
displayKey: 'id',
templates: {
empty: [
'<div class="card card-body">',
'no data match',
'</div>'
].join('\n'),
suggestion: function (data){return '<div class="list-group-item list-group-item-action"><dl>'+'<dt class="text-primary">'+data.id+'</dt><dd>'+data.name+'</dd></dl></div>'}
}
});
var self = this;
this.$el.on('typeahead:selected typeahead:autocompleted', function(e, data) {
self.handleSelected(e,data);
});
}
componentWillUnmount() {
this.$el.off('typeahead:selected typeahead:autocompleted', this.handleSelected);
this.$el.off('change', this.handleChange);
this.$el.typeahead('destroy');
}
handleChange(e, data) {
this.props.onChange(e, data);
}
handleSelected(e, data) {
this.props.onSelected(e, data);
}
render() {
return(
<div>
<input type="text" ref={this.inputText} name={this.props.name} value={this.props.value} onChange={this.handleChange} className="typeahead" />
</div>
);
}
}
它不断抛出此错误消息:
typeahead.bundle.js:374 Uncaught TypeError: this._send is not a function
at Transport._get (typeahead.bundle.js:374)
at later (typeahead.bundle.js:113)
问题解决了!这是jquery.3x.x的“苗条”版本。slim。min问题。切换为非苗条,效果很好。感谢您分享您的想法。