Reagieren Komponente "Schließen", wenn verloren Fokus

Question

Ich versuche, eine select2 Stil-Komponente in React zu erstellen.

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?

Answer 1

erreicht ich diese Funktionalität durch:

das Einlochen im Konstruktor:

this.windowClick = this.windowClick.bind(this); 

(Von dem, was dfsq sagte) Setzen Sie dieses in componentDidMount:

if (window) { 
    window.addEventListener('click', this.windowClick, false); 
} 

Dieser Event-Handler:

windowClick(event) { 
    event.preventDefault(); 

    if (event.target.classList.contains('searchable-marker')) { 
     return; 
    } else { 
     this.setState({ 
      showSearch: false 
     }); 
    } 
} 

Wo searchable-marker ist nur eine Klasse Ich legte alle divs, ULs, li und Eingänge, um sicherzustellen, dass, wenn ich einen von diesen, würde es nicht die Box zu schließen.

Hinzufügen der Aushängen:

componentWillUnmount() { 
    window.removeEventListener('click', this.windowClick, false); 
} 

Answer 2

was Sie versuchen können, ist onBlur Sie könnten den Wert von this.state.showSearch = false ändern und wenn diese Bedingung erfüllt ist, fügen Sie einen className = "ausblenden" (ausblenden {display: none}) durch Erstellen einer benutzerdefinierten Funktion Das gibt einen Klassennamen als String zurück.