Ich versuche, eine select2 Stil-Komponente in React zu erstellen.Reagieren Komponente "Schließen", wenn verloren Fokus
I 90% Funktionalität unten erhalten haben, die ein Bit kann ich einfach nicht hiding the result box when the user clicks away
ist ergründen Die Render-Methode ist:
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>
);
}
Ich habe versucht, um onBlur={this.onBlur}
bewegen, aber es nur feuert, wenn der <input...
Fokus hatte, bevor man weg geklickt hat.
Es kann nicht so kompliziert sein, der einzige Ansatz, an den ich dachte, ist das Anhängen eines globalen Click-Handlers an die Seite und differierende Klicks, um zu verstehen, ob ein Benutzer nicht auf meine Komponente geklickt hat. Aber das scheint überentwickelt zu sein.
Wie kann dies erreicht werden?
* „einen globalen Click-Handler auf der Seite befestigt“ * - das ist genau, wie es getan werden sollte. – dfsq
Sie ernst ?! Richtig .... zu welchem Objekt, Fenster, Dokument? –
@CallumLinington, Fenster würde funktionieren – Chris