React.js模式不与语义Ui一起显示

Question

我试图显示一个带有reactjs的模式onclick，我知道有一个用于React的语义ui插件，但是我使用的是jquery版本。 到目前为止，我尝试过的是：

的index.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>

App.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>
    }
  }
}

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中呈现模态只是不显示模态，似乎是不可见的。

Answer 1

在您的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>
    )
  }
}