React:React-bootstrap 模态在 ie 10 中不起作用
React: React-bootstrap modal not working in ie 10
使用 React-Bootstrap,我有一个有条件打开的模式。模式在 ie 11 中工作正常。
这是在 ie11 中工作的模式..
handleCloseAlert() {
this.setState({ alertShow: false });
}
handleShowAlert() {
this.setState({ alertShow: true });
}
noResults() {
this.setState({alertShow:true})
}
<Modal show={this.state.alertShow}
onHide={this.handleCloseAlert}
{...this.props}
data-toggle="modal"
size="sm"
aria-labelledby="contained-modal-title-vcenter"
centered>
<Modal.Header closeButton>
<Modal.Body>No results found</Modal.Body>
</Modal.Header>
</Modal>
当我在 ie10 中测试时,当模式应该打开时屏幕变白了。
这是我在控制台中遇到的错误..
[object Error]{description: "Unable to s...", message: "Unable to s...", name: "TypeError", number: -2146823281, stack:
Unhandled promise rejection TypeError: Unable to set property 'paddingRight' of undefined or null reference
我还仅使用 Bootstrap 代码进行了测试,模态与来自 bootstrap 网站的示例代码一起使用。我想我可以使用他们的代码,但我不知道如何有条件地打开和关闭模态。
这是来自 bootstrap 的示例,它没有针对条件反应渲染进行编码。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
我尝试将 show={this.state.alertShow}
添加到模态标签,但我在控制台中收到此错误。
Warning: Received `false` for a non-boolean attribute `show`.
If you want to write it to the DOM, pass a string instead: show="false" or show={value.toString()}.
If you used to conditionally omit it with show={condition && value}, pass show={condition ? value : undefined} instead.
有没有办法保留我当前的代码并让它与 ie10 一起工作?或者我是否需要在没有 React-Bootstrap 的情况下重新编码?
我的 index.js
中也有 import 'react-app-polyfill/ie9';
Modal 正在使用新的 react-bootstrap 更新
使用 React-Bootstrap,我有一个有条件打开的模式。模式在 ie 11 中工作正常。
这是在 ie11 中工作的模式..
handleCloseAlert() {
this.setState({ alertShow: false });
}
handleShowAlert() {
this.setState({ alertShow: true });
}
noResults() {
this.setState({alertShow:true})
}
<Modal show={this.state.alertShow}
onHide={this.handleCloseAlert}
{...this.props}
data-toggle="modal"
size="sm"
aria-labelledby="contained-modal-title-vcenter"
centered>
<Modal.Header closeButton>
<Modal.Body>No results found</Modal.Body>
</Modal.Header>
</Modal>
当我在 ie10 中测试时,当模式应该打开时屏幕变白了。 这是我在控制台中遇到的错误..
[object Error]{description: "Unable to s...", message: "Unable to s...", name: "TypeError", number: -2146823281, stack:
Unhandled promise rejection TypeError: Unable to set property 'paddingRight' of undefined or null reference
我还仅使用 Bootstrap 代码进行了测试,模态与来自 bootstrap 网站的示例代码一起使用。我想我可以使用他们的代码,但我不知道如何有条件地打开和关闭模态。
这是来自 bootstrap 的示例,它没有针对条件反应渲染进行编码。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
我尝试将 show={this.state.alertShow}
添加到模态标签,但我在控制台中收到此错误。
Warning: Received `false` for a non-boolean attribute `show`.
If you want to write it to the DOM, pass a string instead: show="false" or show={value.toString()}.
If you used to conditionally omit it with show={condition && value}, pass show={condition ? value : undefined} instead.
有没有办法保留我当前的代码并让它与 ie10 一起工作?或者我是否需要在没有 React-Bootstrap 的情况下重新编码?
我的 index.js
中也有import 'react-app-polyfill/ie9';
Modal 正在使用新的 react-bootstrap 更新