Question

我是新的反应。我有一个用于bootstrap卡的组件，如下所示，

const Card = (props) => {
return (
<div className="col-xl-3 col-lg-4 col-md-6 col-sm-12">
  <div className="card">
    <a data-src="https://www.youtube.com/embed/A-twOC3W558" data-toggle="modal" data-target="#myModal"><img className="card-img-top" src={props.avatar_url} alt="card" /></a>
    <div className="card-body">
      <h3 className="card-title">{props.login}</h3>
      <p className="card-text">{props.events_url}</p>
    </div>
  </div>
</div>
)}

它在锚标签内有一个图像。我的要求是，当我点击这个图像时，它应该打开引导模式。

bootstrap模态组件如下所示，它实际上位于不同的文件中。

class Modal extends Component {
render() {
    return (
        <div className="container">
            <div className="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                        <div className="modal-body">
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div className="embed-responsive embed-responsive-16by9">
                                <iframe className="embed-responsive-item" src="" id="video" allowscriptaccess="always">></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
  }
}

单击图像时如何打开模态？

如何在另一个组件中打开一个组件中存在的bootstrap模式？

0 个答案: