3

这是我第一次尝试将 Meteor 与 ReactJs 和 React Semantic UI 一起使用，并且在渲染 Semantic UI 模式时遇到了问题。我想要实现的是单击按钮并打开整个浏览器上的模态覆盖，参考React Semantic Modal Manual 但我现在所拥有的是模态部分呈现在屏幕上，如所见从随附的屏幕截图中。有人可以帮忙吗？提前致谢。

主.js

import {Meteor} from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from "../imports/routes/routes";

Meteor.startup(() => {
    ReactDOM.render(routes, document.getElementById('app'));
});

网站.js：

import React from 'react';
import { Header, Button, Modal } from 'semantic-ui-react';

import PrivateHeader from './PrivateHeader';
import Sidebar from './Sidebar';
import ModalExample from './Modal';

export class Site extends React.Component {
render() {
        return (
            <div>
                <PrivateHeader/>
                <Sidebar/>
                <div className="page">
                    <div className="ui padded one column grid">
                        <div className="column">
                            <ModalExample/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default Site;

模态示例.js

import React from 'react'
import { Button, Header, Icon, Modal } from 'semantic-ui-react'

const ModalBasicExample = () => (
    <Modal trigger={<Button>Basic Modal</Button>} basic size='fullscreen'>
        <Header icon='archive' content='Archive Old Messages' />
        <Modal.Content>
            <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
        </Modal.Content>
        <Modal.Actions>
            <Button basic color='red' inverted>
                <Icon name='remove' /> No
            </Button>
            <Button color='green' inverted>
                <Icon name='checkmark' /> Yes
            </Button>
        </Modal.Actions>
    </Modal>
)

export default ModalBasicExample

Sidebar.js

export const Sidebar = (props) => {
    return (
        <div className="ui inverted vertical left fixed menu" >
            <a className="item" href="/">
                <img src='/images/logo.png' className="ui mini right spaced image"/>
                Semantics UI Test
            </a>

            <div className="item">
                <div className="header">Hosting</div>
                <div className="menu">
                    <a className="item">Shared</a>
                    <a className="item">Dedicated</a>
                </div>
            </div>
            <div className="item">
                <div className="header">Support</div>
                <div className="menu">
                    <a className="item">E-mail Support</a>
                    <a className="item">FAQs</a>
                </div>
            </div>
        </div>
    )
};
export default Sidebar;

基本模式按钮 渲染模态

4

2 回答 2

0

感谢 Saad 提到 className 的评论，我发现这是因为 Semantic UIui page modals dimmer transition visible active在打开模式时会添加一个 className。这会导致我page在其他页面中使用的现有 className 发生冲突，但是由于 Meteor 和 React，各种 scss 被压缩在一起。

于 2017-09-03T01:23:07.390 回答
0

我建议使用触发按钮上this.show('fullscreen')的onClick事件运行，如下所示： 

<Button onClick={this.show('fullscreen')}>Show Modal</Button>

模态示例.js

import React, { Component } from 'react'
import { Button, Modal } from 'semantic-ui-react'

class ModalExample extends Component {
  state = { open: false }

  show = size => () => this.setState({ size, open: true })
  close = () => this.setState({ open: false })

  render() {
    const { open, size } = this.state

    return (
      <div>
        <Button onClick={this.show('fullscreen')}>Show Modal</Button> // Triggering button

        <Modal size={size} open={open} onClose={this.close}>
          <Modal.Header>
            Delete Your Account
          </Modal.Header>
          <Modal.Content>
            <p>Are you sure you want to delete your account</p>
          </Modal.Content>
          <Modal.Actions>
            <Button negative>
              No
            </Button>
            <Button positive icon='checkmark' labelPosition='right' content='Yes' />
          </Modal.Actions>
        </Modal>
      </div>
    )
  }
}

export default ModalExample

资源

于 2017-09-02T18:53:27.933 回答