Entfernen einer Komponente onClick-in reagieren

Ich bin Anzeige a overlay Seite, wenn eine bestimmte input geklickt wird. Jetzt will ich entfernen, dass overlay Seite, wenn ein Benutzer clicks irgendwo in diesem overlay. Wie kann ich das tun?

Ich bin die Anzeige der overlay auf klicken Sie auf, wie diese

constructor(props) {
        super(props);

        this.state = {
            showComponent: false,
        };
        this.popup_ques = this.popup_ques.bind(this);

    }

    popup_ques() {
        this.setState({
            showComponent: true,
        });
    }

 render() {
        return (
            <div className="ff">
                <div className="middle_div">
                    <input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={this.popup_ques}/>
                </div>

                {this.state.showComponent ? <QuestionOverlay/> : null}

            </div>
        );
    }

Meine overlay ist in der Komponente QuestionOverlay

class QuestionOverlay extends Component {
    constructor() {
        super();
    }

    closeOverLay = (e) => {
        alert("fse");
    }

    render() {
        return (
            //Here I have implemented my overlay
        )
    }

}

export default QuestionOverlay;

Also, wie kann ich schließen/entfernen der overlay-Komponente, wenn ich Sie irgendwo auf meinem overlay?

InformationsquelleAutor CraZyDroiD | 2017-02-14
  1. 1

    Übergeben Sie eine Funktion aus der Überlagerung der übergeordneten Komponente (die Komponente, die zeigt die Overlay), die aufgerufen wird onClick im Overlay. Diese Funktion aktualisiert this.state.showComponent des Elternteils, der false zu verstecken Overlay.

    Eltern

    constructor(props) {
    super(props);

    this.state = {
        showComponent: false,
    };
    this.popup_ques = this.popup_ques.bind(this);
    this.hide_overlay = this.hide_overlay.bind(this);

}

popup_ques() {
    this.setState({
        showComponent: true,
    });
}

hide_overlay() {
  this.setState({
    showComponent: false
  })
}

render() {
    return (
        <div className="ff">
            <div className="middle_div">
                <input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={this.popup_ques}/>
            </div>

            {this.state.showComponent && <QuestionOverlay hideOverlay={this.hide_overlay} />}

        </div>
    );
}

    Overlay

    class QuestionOverlay extends Component {
  constructor() {
    super();
  }

  closeOverLay = (e) => {
    alert("fse");
  }

  render() {
    return (
        <div onClick={this.props.hideOverlay}>
          //Overlay content
        </div>
    )
  }

}

export default QuestionOverlay;
    • Ich denke, es wäre besser, zu tun, Bindung this.hideOverlay.bind(this) im Konstruktor.
    • DeWoody: Dein Ansatz ist gut, aber es funktioniert nicht für mich. Habe ich eingefügt, ein Alarm nur um zu sehen, wenn das click-Ereignis funktioniert. Und das tut es. Das problem ist also nicht die änderung der Status der Komponente auf false.
    • Versuchen {this.state.showComponent && <QuestionOverlay hideOverlay={this.hide_overlay} />} as opposed to the ternary.
    • funktioniert immer noch nicht. Overlay nicht ändern, es ist Staat
    • Die Arbeit in diesem Codepen - codepen.io/brettdewoody/pen/qRgxMZ
    • ja, ich habe es an die Arbeit. Sie waren richtig, alle zusammen. Ich weiß nicht, was passiert ist, aber es funktioniert jetzt

    InformationsquelleAutor Brett DeWoody
Schreibe einen Kommentar