リアクションのシングルポップオーバーコンポーネント

Question

私のアプリではたくさんのボタンがあります。いずれかのボタンをクリックすると、いくつかのコントロール（したがってイベント）を開くポップオーバーが発生します。

最初はすべてのボタンコンポーネントにポップオーバーコンポーネントを配置したいと思っていましたが、実際には1つのポップオーバーだけが表示されるため、実際には必要ありません。

私は本当にそれをやる方法について固執しています。ポップオーバーの表示と終了を処理するにはどうすればよいですか？どこに置くべきですか？

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> 
    ); 
    } 
}