我正在尝试创建一个 select2 React 中的样式组件。
我的功能下降了 90%,我无法理解的一点是 hiding the result box when the user clicks away
渲染方法是:
render() {
let resultBlock;
if (this.state.showSearch) {
resultBlock = (
<div className="search-input-container" onBlur={this.onBlur}>
<div className="search-input-results">
<input
type="text"
name={this.props.name}
placeholder={this.props.placeholder}
className="form-control"
onChange={this.inputKeyUp}
autoComplete="false" />
<ul>
{this.state.items.map((item, i) => <li key={i} data-value={item.id} onClick={this.itemSelected} className={item.isSelected ? 'selected' : ''}>{item.text}</li>)}
</ul>
</div>
</div>
);
}
let displayBlock;
if (this.props.value.text) {
displayBlock = this.props.value.text;
} else {
displayBlock = <span className="placeholder">{this.props.placeholder}</span>;
}
return (
<div className="form-group">
<label htmlFor={this.props.name}>{this.props.label}:</label>
<div className="form-input">
<div className="searchable-dropdown" onClick={this.revealSearch}>
{displayBlock}
<div className="arrow"><i className="fa fa-chevron-down" aria-hidden="true" /></div>
</div>
{resultBlock}
</div>
</div>
);
}
我试过移动 onBlur={this.onBlur}
周围,但只有在 <input...
时才会触发在点击离开之前获得焦点。
它不可能那么复杂,我想到的唯一方法是将全局点击处理程序附加到页面,并区分点击以了解用户是否没有点击我的组件。但这似乎设计过度了。
如何实现?
最佳答案
我通过以下方式实现了此功能:
将其放入构造函数中:
this.windowClick = this.windowClick.bind(this);
(根据 dfsq 所说)将其放入 componentDidMount:
if (window) {
window.addEventListener('click', this.windowClick, false);
}
这个事件处理程序:
windowClick(event) {
event.preventDefault();
if (event.target.classList.contains('searchable-marker')) {
return;
} else {
this.setState({
showSearch: false
});
}
}
searchable-marker
只是我放在所有 div、ul、li 和输入上的一个类,以确保如果我单击其中一个,它不会关闭该框。
添加卸载:
componentWillUnmount() {
window.removeEventListener('click', this.windowClick, false);
}
关于javascript - 失去焦点时 react 组件 "closing",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41239207/