单击时插入组件，单击时移除该组件以外的组件

Question

ContentWithFooter 有Card 的列表。每个Card 都有一个菜单来标记或删除卡片（文章）。单击icon 时，我只想插入该卡而不是所有卡的菜单（<DeleteFlagPost/>）。同样在插入菜单后，当单击该菜单以外的其他菜单时，将其从菜单组件中删除。我怎么做？我知道这是一个很长的 HOW 清单，但你的帮助真的会帮助我理解更多。谢谢。

ContentWithFooter.js：

class ContentWithFooter extends React.Component {
    render() {
        return(
            <div>
                <Card/>
                <Card/>
                <Card/>
            </div>
        );
    }
}

卡片.js

class Card extends React.Component {
    handleDeleteFlag() {
        return(
            // GET THE CLICKED OBJECT OF THIS CARD AND INSERT <DeleteFlagPost/>???
        );
    }
    render() {
        return(
            <article class="article">
            ...
                <div class="delete-flag-post-btn">
                    <i class="fa fa-ellipsis-v" aria-hidden="true" onClick={this.handleDeleteFlag}></i>

                    // INSERT THE <DeleteFlagPost/> here when clicked on I element...

                </div>
            ...
            ...
            </article>
        );
    }
}

Answer 1

Keep active card in the contentwithfooter

 class ContentWithFooter extends React.Component {
    updateMenuForCards(cardNumActive) {
      this.setState({
          cardNumActive
      })
    }
    render() {
        return(
            <div>
                <Card cardNumber= 0 showMenu={cardNumActive === 0} updateMenuForCards={updateMenuForCards}/>
                <Card cardNumber= 1 showMenu={cardNumActive === 0} updateMenuForCards={updateMenuForCards}/>
                <Card cardNumber= 2 showMenu={cardNumActive === 0} updateMenuForCards={updateMenuForCards}/>
            </div>
        );
    }
}

    class Card extends React.Component {
            constructor() {
               super(props);
            }

            handleDeleteFlag() {
                this.props.updateMenuForCards(this.props.cardNumber)
            }
            renderDeleteFlag() {
                if (this.props.showMenu) {
                    return (<DeleteFlag/>)
                }
            }
            render() {
                return(
                    <article class="article">
                    ...
                        <div class="delete-flag-post-btn">
                            <i class="fa fa-ellipsis-v" aria-hidden="true" onClick={this.handleDeleteFlag}></i>

                            {this.renderDeleteFlag()}

                        </div>
                    ...
                    ...
                    </article>
                );