reactjs中web应用程序的三点多选项菜单逻辑

我是ReactJs新手，正在开发一个社交媒体web应用程序。这里我有一个模板，我必须实现一个三点多选项菜单。我尝试使用引导菜单和反应引导组件菜单。这两个都不适合我。在不使用库的情况下实现此功能的最佳方法是什么

我一直到切换菜单。但一单击，所有菜单都会切换。我无法单独进行切换

下面是我做的一段代码：

post.jsx

class UserPost extends Component {
    state = {
      overFlowMenuActive: false
    };

    toggleOverflowMenu = () => {
      this.setState((prevState) => ({ overFlowMenuActive: 
         !prevState.overFlowMenuActive }));
    };

    closeOverflowMenu = () => {
        this.setState({ overFlowMenuActive: false });
    };

    render() {
     return (
        <React.Fragment>
            {this.props.posts.map((post, index) =>(
               <div>
                 <div tabIndex='0' onBlur={this.closeOverflowMenu}>
                     <img src={require('../../assets/images/more.svg')} alt='' onClick={this.toggleOverflowMenu}/>
                 </div>
                 <MoreBtn options={this.state.options} overFlowMenuActive={this.state.overFlowMenuActive} />
                </div>
             ))}
        </React.Fragment>
    );
}

<div className={`${classes['popup-more']} ${this.props.overFlowMenuActive
                    ? classes.expand
                    : classes.collapse}`}>
    {this.props.options.map((option, index) => (
        <div key={index}>
            <img src={option.url} alt='' />
            <p>{option.name}</p>
        </div>
    ))}
</div>

类UserPost扩展组件{ 状态={ overFlowMenuActive:false }; toggleOverflowMenu=（）=>{ this.setState（（prevState）=>（{overFlowMenuActive: ！prevState.overFlowMenuActive}）； }; closeOverflowMenu=（）=>{ this.setState（{overFlowMenuActive:false}）； }; render（）{ 返回( {this.props.posts.map（（post，index）=>( ))} ); } MoreBtn.jsx

class UserPost extends Component {
    state = {
      overFlowMenuActive: false
    };

    toggleOverflowMenu = () => {
      this.setState((prevState) => ({ overFlowMenuActive: 
         !prevState.overFlowMenuActive }));
    };

    closeOverflowMenu = () => {
        this.setState({ overFlowMenuActive: false });
    };

    render() {
     return (
        <React.Fragment>
            {this.props.posts.map((post, index) =>(
               <div>
                 <div tabIndex='0' onBlur={this.closeOverflowMenu}>
                     <img src={require('../../assets/images/more.svg')} alt='' onClick={this.toggleOverflowMenu}/>
                 </div>
                 <MoreBtn options={this.state.options} overFlowMenuActive={this.state.overFlowMenuActive} />
                </div>
             ))}
        </React.Fragment>
    );
}

<div className={`${classes['popup-more']} ${this.props.overFlowMenuActive
                    ? classes.expand
                    : classes.collapse}`}>
    {this.props.options.map((option, index) => (
        <div key={index}>
            <img src={option.url} alt='' />
            <p>{option.name}</p>
        </div>
    ))}
</div>

{this.props.options.map（（选项，索引）=>(
{option.name}

))}

您只为所有

用户帖子维护一个状态

要单独切换这些状态，应将这些状态移动到组件中

class SinglePost extends Component {
    state = {
      overFlowMenuActive: false
    };

    toggleOverflowMenu = () => {
      this.setState((prevState) => ({ overFlowMenuActive: 
         !prevState.overFlowMenuActive }));
    };

    closeOverflowMenu = () => {
        this.setState({ overFlowMenuActive: false });
    };

    render() {
     return (
        <div>
                 <div tabIndex='0' onBlur={this.closeOverflowMenu}>
                     <img src={require('../../assets/images/more.svg')} alt='' onClick={this.toggleOverflowMenu}/>
                 </div>
                 <MoreBtn options={this.state.options} overFlowMenuActive={this.state.overFlowMenuActive} />
                </div>
    );
}
class UserPost extends Component {
    render() {
     return (
        <React.Fragment>
            {this.props.posts.map((post, index) =>(
               <SinglePost post={post} />
             ))}
        </React.Fragment>
    );
}

类SinglePost扩展组件{
状态={
overFlowMenuActive:false
};
toggleOverflowMenu=（）=>{
this.setState（（prevState）=>（{overFlowMenuActive:
！prevState.overFlowMenuActive}）；
};
closeOverflowMenu=（）=>{
this.setState（{overFlowMenuActive:false}）；
};
render（）{
返回(
);
}
类UserPost扩展组件{
render（）{
返回(
{this.props.posts.map（（post，index）=>(
))}
);
}

这样，一次只切换一个组件的按钮