Javascript 使用React在引导（v3.3.7）模式中呈现图表

我试图在引导模式中呈现图表。只有在模式完全显示后，才能呈现图表。我的要求是使用引导与反应。我使用了react引导，效果很好。我正面临着普通引导的问题

这是我在componentDidMount（）中拥有的jQuery代码。在这里，单击一个按钮，当显示模式时，必须弹出一条警告消息-，但该消息没有发生。不会触发模式显示事件。这就是我试图呈现图表的地方。因此，如果显示警报消息，我的图表将在模式中呈现

$(document).ready(function(){
        $("#myBtn").click(function(){
            $("#myModal").on('shown.bs.modal', function () {
                alert('The modal is fully shown.');
        });
     });
});

---

如何处理此问题？

没有jquery

你可以等到你的图表（我猜这是一个图像完全加载）。模态显示仅使用css，因此它将是即时的

constructor(props){
    super(props)
    this.state({loaded : false, show : false})
}

imageLoaded(){
    this.setState({loaded : true})
}

btnClick(){
    this.setState({show : true})
}

render(){
    var display = this.state.loaded&&this.state.show ? 'block' : 'none'
    return(
    // All your render
    <ModalDiv style={{display}} >
        <img src={YourSource} onLoad={this.imageLoaded.bind(this)}/>
    </ModalDiv>
    <button onClick={this.btnClick.bind(this)}>YOUR SHOW CHART BUTTON </button>
)}

构造函数（道具）{
超级（道具）
this.state（{loaded:false，show:false}）
}
imageLoaded（）{
this.setState（{loaded:true}）
}
btnClick（）{
this.setState（{show:true}）
}
render（）{
var display=this.state.loaded&&this.state.show？'block'：'none'
返回(
//你所有的渲染
显示图表按钮
)}

这是一个简单的变体，使您能够仅在加载时显示图表。您可以有多种变体，如记录单击事件，然后在加载所有内容时显示，或使用加载屏幕等

---

希望你得到它

将jquery与react或任何其他框架一起使用是不正确的。即使触发了“show.bs.modal”事件，也会降低其性能。您是否设置了事件发射器？同时删除回调外部的$（“#myModal”）。这没有任何意义。@Prajval M，你能告诉我正确的方法吗？请阅读-总结是，这不是一个理想的方式来解决志愿者，可能会适得其反获得答案。请不要将此添加到您的问题中。