最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to pass data to a Ant Design Modal - Stack Overflow

programmeradmin2浏览0评论

I have a simple application that pops up a ant design modal. Like this:

    render() {
    return (
        <div>
                <Menu className="parent">
                    <Menu.Item className="menu_item" onClick={DataModal} >
                        <span className="item_name">Data</span>
                        <Icon type="right" className="item_icon" style={{ float: 'right', fontSize: '1.5em' }} />
                    </Menu.Item>
               </Menu>
        </div>
     )}

When user click on the menu item it pops up the DataUsage modal which is this:

Data.js

export default function DataModal() {
    Modal.info({
        title: 'Data',
        content: (
            <div className="modal_data_wrapper">

           </div>
        ),
        style: { top: 0, height: '83vh' },
        width: '100%',
        onOk() { },
    });
}

Popup is working correctly. I need to send some data to this modal. How can I do this ?

I have a simple application that pops up a ant design modal. Like this:

    render() {
    return (
        <div>
                <Menu className="parent">
                    <Menu.Item className="menu_item" onClick={DataModal} >
                        <span className="item_name">Data</span>
                        <Icon type="right" className="item_icon" style={{ float: 'right', fontSize: '1.5em' }} />
                    </Menu.Item>
               </Menu>
        </div>
     )}

When user click on the menu item it pops up the DataUsage modal which is this:

Data.js

export default function DataModal() {
    Modal.info({
        title: 'Data',
        content: (
            <div className="modal_data_wrapper">

           </div>
        ),
        style: { top: 0, height: '83vh' },
        width: '100%',
        onOk() { },
    });
}

Popup is working correctly. I need to send some data to this modal. How can I do this ?

Share Improve this question asked Mar 6, 2019 at 3:18 isuruAbisuruAb 2,2405 gold badges28 silver badges39 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

You could pass it into your modal creation function. For example:

export default function DataModal(dataToPassIn) {
Modal.info({
  title: 'Data',
  content: (
    <div className="modal_data_wrapper">
      {dataToPassIn}
    </div>
  ),

Then just pass the args in when you call it:

<Menu.Item className="menu_item" onClick={() => DataModal('hello')} >
发布评论

评论列表(0)

  1. 暂无评论