Question

我试图在bootstrap模式中渲染图表。只有在完全显示模态后才能渲染图表。我的要求是使用Bootstrap和React。我使用了react-bootstrap，它工作正常。我正面临着普通Bootstrap的问题。

这是我在componentDidMount（）中的jQuery代码。在这里，点击一个按钮，当显示模态时，必须弹出警告消息 - 未发生。不会触发模态显示事件。这是我试图渲染我的图表的地方。因此，如果显示警告消息，我的图表将在模态内呈现。

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

我该如何处理这个问题？

Answer 1

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

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

希望你明白！

使用React在Bootstrap（V 3.3.7）模式内渲染图表

1 个答案: