Javascript React.js模式不显示在语义Ui中

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

index.html

App.js

Modal.js

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

在你的应用程序中试试这个。js：

---

它工作得很好，谢谢，但我不想混合使用jquery和react js代码，我主要想知道为什么我的代码不工作，并想用react方法而不是jquery来修复它。如果我找不到正确的方法，我会强制使用您的方法。为什么要将jquery与react一起使用？语义ui有一个react库。

<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>

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

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>
        )
    }
}

 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>
    )
  }
}