IT技术 - 单击时插入组件，单击该组件以外的组件时删除组件 - 吾爱随笔录

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

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