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