javascript - React.js 模式未通过 Semantic 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>
    )
  }
}