javascript-SemanticUI搜索-下拉选择不填充输入
作者:互联网
我正在使用语义UI React构建输入组件.我希望它在焦点对准时打开下拉列表,而不是默认行为,即当用户更改搜索字符串时显示结果.我正在使用他们的网站here上的道具.
这是我的一些相关代码:
constructor(props) {
super(props);
this.handleResultSelect = this.handleResultSelect.bind(this);
this.handleFocusSearch = this.handleFocusSearch.bind(this);
this.handleBlurSearch = this.handleBlurSearch.bind(this);
this.state = ({
results: [{
"title": "Roob, Cummerata and Watsica"
},
{
"title": "Stanton, Kessler and Walsh"
},
{
"title": "Boyle, Schuppe and Renner"
}],
value: '',
open: false,
});
}
handleBlurSearch () {
this.setState({
open: false,
focused: false,
});
}
handleFocusSearch () {
this.setState({
open: true,
focused: true,
});
}
handleResultSelect(e, {result}) {
this.setState({ value: result.title });
}
render() {
var searchProps = {
input: <input className='custom-form-field' placeholder={this.props.placeholder}/>,
open: this.state.open,
onFocus: this.handleFocusSearch,
onBlur: this.handleBlurSearch,
results: this.state.results,
onResultSelect: this.handleResultSelect,
value: this.state.value,
};
return (
<SemanticUI.Search {...searchProps} />
);
}
但是,在选择结果时,未在输入值中设置结果标题值.此外,在调试时,我发现甚至没有调用handleResultSelect.
我的第一个猜测是onBlur导致结果下拉列表关闭,并且结果选择事件被忽略.不过我不确定.我是React和Semantic的新手.
任何帮助弄清楚这一点将是受欢迎的.
解决方法:
尝试将值prop添加到searchProps.另外,onBlur事件和onResultSelect彼此冲突,因此我在lodash.debounce函数中添加了一个延迟.
所以像这样
class SearchExampe extends React.Component {
constructor(props) {
super(props);
this.handleResultSelect = this.handleResultSelect.bind(this);
this.handleFocusSearch = this.handleFocusSearch.bind(this);
this.handleBlurSearch = this.handleBlurSearch.bind(this);
this.handleSearchChange = this.handleSearchChange.bind(this);
this.state = {
results: [
{
title: "Roob, Cummerata and Watsica"
},
{
title: "Stanton, Kessler and Walsh"
},
{
title: "Boyle, Schuppe and Renner"
}
],
value: " ",
open: true
};
}
handleSearchChange(e) {
this.setState({ value: e.target.value });
}
handleBlurSearch() {
this.setState({
open: false,
focused: false
});
}
handleFocusSearch() {
this.setState({
open: true,
focused: true
});
}
handleResultSelect(e) {
this.setState({ value: e.target.value, open: false });
}
render() {
var searchProps = {
input: <input className="custom-form-field" onChange={this.handleSearchChange} placeholder="placeholder" />,
open: this.state.open,
onFocus: this.handleFocusSearch,
onBlur: _.debounce(this.handleBlurSearch, 100, {}),
results: this.state.results,
onResultSelect: this.handleResultSelect,
value: this.state.value
};
return <Search {...searchProps} />;
}
}
标签:reactjs,dom-events,semantic-ui-react,javascript 来源: https://codeday.me/bug/20191108/2008757.html