react 定义json数据和点击触发弹窗

最新推荐文章于 2025-03-20 16:00:24 发布

头发快掉没了的程序猿

最新推荐文章于 2025-03-20 16:00:24 发布

阅读量602

点赞数

文章标签： json react.js 前端

本文链接：https://blog.youkuaiyun.com/LiuBo_1999/article/details/121138896

版权

本文介绍如何在React中定义JSON数据，并通过点击事件触发弹窗。首先，利用async和await从接口获取JSON数据。接着，将数据引入到React组件中。在页面上，设置点击事件，当用户点击时，展示包含JSON数据的弹窗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义的json数据

拿到你定义数据的接口在随便定义个名字（我用async和await了）

在页面引入

使用代码（和点击弹出框）

import { Button, Dropdown, Menu, span, Modal, message } from 'antd';
import { connect, injectIntl, FormattedMessage } from 'umi';
import React, { Component, useState } from 'react';
import { outLogin111 } from '@/services/ant-design-pro/api';
import { lodash } from '@umijs/utils';
const msg = await outLogin111();
const { SubMenu } = Menu;
// const [isModalVisible, setIsModalVisible] = useState(false);
class ActiviteList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            search: false,
            Adata: []
        };
    }
    add(ite) {
        let state = this.state
        let it = '名字:' + ite.name + '————' + '序号:' + ite.number + '————' + '路由:' + ite.routing
        this.setState({ ...state, search: true, Adata: it })
    }

    handleCancel() {
        message.success('您已确定!', 3)
        let t = this.state
        this.setState({ ...t, search: false })
    }
    cancel() {
        message.error("您取消了!", 3)
        let t = this.state
        this.setState({ ...t, search: false })
    }
    render() {
        return [(
            <div>
                {
                    msg.data.content.map((item) => {
                        // console.log(key);
                        return (
                            <Menu mode="inline" style={{ width: 256 }}>
                                <SubMenu onClick={() => {
                                    console.log(item.number);
                                }} title={item.name}>
                                    {
                                        item.TheChild.map((ite, index) => {
                                            // console.log(ite.name);
                                            return (
                                                <Menu.Item onClick={
                                                    this.add.bind(this, ite)
                                                } key={index}>{ite.name}</Menu.Item>
                                            )
                                        })
                                    }
                                </SubMenu>
                            </Menu>
                        )
                    })
                }
            </div>),

        (<Modal title="Basic Modal" centered='false' visible={this.state.search} onCancel={this.cancel.bind(this)} onOk={this.handleCancel.bind(this)}>
            <p>{this.state.Adata}</p>
        </Modal>)
        ]
    }
}
export default injectIntl(ActiviteList);

样式图