时间戳

首页 > 解决方案 > React.js 模态不显示语义 Ui

javascript - React.js 模态不显示语义 Ui

问题描述

我正在尝试使用 reactjs 显示模态 onclick，我知道有一个特定的语义 ui 插件用于反应，但我使用的是 jquery 版本。到目前为止，我尝试过的是：

索引.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.0/dist/semantic.min.css"/>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.0/dist/semantic.min.js"></script>

<script>
$(document).ready(function () {
  $('.modal').modal();
})
</script>

应用程序.js

export default class Request extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      openModal: false,
    }
  }

  handleClick = (e) => {
    this.setState({
      openModal: true
    });
  }

  closeModal = (e) => {
    this.setState({
      openModal: false
    });
  }

  render() {
    return (
    <Button onClick={this.handleClick} class="positive">show modal</Button>
    <Modal open={this.state.openModal} onClose={this.closeModal} class="basic" title="My Title">It's a title</Modal>
    }
  }
}

模态.js

export default class Modal extends React.Component {
    render() {
        return(
            <div className={'ui modal '+ this.props.class}>
                <div className="ui icon header">
                    <i className="archive icon"></i>
                    {this.props.title}
                </div>
                <div className="content">
                    <p>{this.props.children}</p>
                </div>
                <div className="actions">
                    <div className="ui red basic cancel inverted button">
                        <i className="remove icon"></i>
                        No
                    </div>
                    <div className="ui green ok inverted button">
                        <i className="checkmark icon"></i>
                        Yes
                    </div>
                </div>
            </div>
        )
    }
}

但问题是，当我单击按钮时，什么也没有发生，没有控制台错误，请注意，它在我的 html 中呈现模态只是不显示模态，似乎是不可见的。

标签： javascriptreactjs

解决方案

在你的App.js中试试这个：

 export default class Request extends React.Component {
  handleClick = (e) => {
     window.jQuery(".modal").modal("show")
  }

  closeModal = (e) => {
     window.jQuery(".modal").modal("hide")
  }

  render() {
    return (
      <Button onClick={this.handleClick} className="positive">show modal</Button>
      <Modal open={this.state.openModal} onClose={this.closeModal} className="basic" title="My Title">
         It's a title
      </Modal>
    )
  }
}

推荐阅读