javascript - 单击时插入组件，单击该组件以外的组件时删除该组件

Question

ContentWithFooter列表为Card的。每个Card有一个菜单可以标记或删除卡片(文章)。当 icon单击后，我想仅为该卡而不是所有卡插入菜单( <DeleteFlagPost/> )。此外，插入菜单后，当单击该菜单以外的其他菜单时，会将其从菜单组件中删除。我怎么做？我知道这是一个很长的 list ，但您的帮助将真正帮助我了解更多。谢谢。

ContentWithFooter.js:

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

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