Question

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

Main.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'));
});

Site.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;

ModalExample.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;

Answer 1

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

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

<强> ModalExample.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

Source

Answer 2

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

如何启用React Semantic UI Modal以在整个屏幕上展开？

2 个答案: