React的單個popover組件

Question

在我的應用程序中，我有很多按鈕。點擊任何一個按鈕都會導致帶有一些控件（因此事件）的彈出窗口打開。

最初我想將popover組件放在每個按鈕組件中，但我並不需要它，因爲在每個時刻只顯示一個彈出窗口。

我真的被困在如何去做。我該如何處理popover的顯示和關閉？我應該把它放在哪裏？

p.s.我在項目中部分使用ReactJS。

Answer 1

您可以創建一個父組件，其中包含彈出窗口和所有按鈕。父組件具有指示彈出窗口的顯示屬性的狀態。

class Parent extends Component { 
    constructor() { 
    this.state = { displayPopover: false }; 

    this.togglePopover = this.togglePopover.bind(this); 
    } 

    togglePopover() { 
    this.setState({ displayPopover: !this.state.displayPopover }); 
    } 

    render() { 
    return (
     <div> 
     <div style={{ display: this.state.displayPopover ? 'block' : 'none' }} /> 
     <button onClick={this.togglePopover}>Toggle 1</button> 
     <button onClick={this.togglePopover}>Toggle 2</button> 
     </div> 
    ); 
    } 
}