javascript - react-bootstrap modal 不会改变它的状态

标签 javascript twitter-bootstrap reactjs bootstrap-modal react-bootstrap

需要帮助!我正在编码 react 应用程序。 我安装了最新版本:react 16.2.0、react-dom 16.2.0、react-bootstrap 0.31.5、react-overlays 0.7.4

我希望该组件具有 state.show = {false} 并且不应出现在页面加载中。但是它出现了。此外，“关闭”按钮并未将 bool 值传递给组件的状态。

这是我的模态组件:AddNewStoreModalDialog.js

import React, { Component } from 'react'
import { Modal, Button } from 'react-bootstrap';

class AddNewStoreModalDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
  }

  open() {
    this.setState({ showModal: true });
  }

  close() {
    this.setState({ showModal: false });
  }

  render() {
    return(
      <div id="add-new-store-modal">
        <Modal.Dialog show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
          </Modal.Header>

          <Modal.Body>
            One fine body...
          </Modal.Body>

          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
            <Button bsStyle="primary">Save changes</Button>
          </Modal.Footer>

        </Modal.Dialog>
      </div>
    );
  }
}

export default AddNewStoreModalDialog;

这是它被插入的地方: 应用程序.js

import React, { Component } from 'react';
import './App.css';
import StoreContainer from './components/StoreContainer'
import GoogleMap from './components/GoogleMap'
import NavBarHeader from './components/NavBarHeader'
import AddNewStoreModalDialog from './components/AddNewStoreModalDialog'

class App extends Component {
  render() {
    return(
      <div className="App">
      <AddNewStoreModalDialog />
        <div class="header">
          <NavBarHeader />
        </div>
        <div class="main-container">
          <div class="left-container">
            <GoogleMap />
          </div>
          <div class="right-container">
            <StoreContainer />
          </div>
        </div>   
      </div>
    )
  }
}

export default App;

这是我的 index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

和index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js"></script>-->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADa-s_wErrhpWEs1iLQDKVE2BOg-E92EU"></script>

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

  </body>
</html>

控制台日志:

index.js:2177 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.
    in div (created by ModalDialog)
    in ModalDialog (at AddNewStoreModalDialog.js:25)
    in div (at AddNewStoreModalDialog.js:24)
    in AddNewStoreModalDialog (at App.js:12)
    in div (at App.js:11)
    in App (at index.js:7)
__stack_frame_overlay_proxy_console__ @ index.js:2177
printWarning @ warning.js:33
warning @ warning.js:57
validateProperty$1 @ react-dom.development.js:13555
warnUnknownProperties @ react-dom.development.js:13580
validateProperties$2 @ react-dom.development.js:13600
validatePropertiesInDevelopment @ react-dom.development.js:13639
setInitialProperties$1 @ react-dom.development.js:13906
finalizeInitialChildren @ react-dom.development.js:14989
completeWork @ react-dom.development.js:8648
completeUnitOfWork @ react-dom.development.js:10132
performUnitOfWork @ react-dom.development.js:10234
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
fn @ bootstrap 93160685b6ed6746a2f2:88
0 @ registerServiceWorker.js:108
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap 93160685b6ed6746a2f2:724
(anonymous) @ bootstrap 93160685b6ed6746a2f2:724
index.js:2177 Warning: Unknown event handler property `onHide`. It will be ignored.
    in div (created by ModalDialog)
    in ModalDialog (at AddNewStoreModalDialog.js:25)
    in div (at AddNewStoreModalDialog.js:24)
    in AddNewStoreModalDialog (at App.js:12)
    in div (at App.js:11)
    in App (at index.js:7)
__stack_frame_overlay_proxy_console__ @ index.js:2177
printWarning @ warning.js:33
warning @ warning.js:57
validateProperty$1 @ react-dom.development.js:13489
warnUnknownProperties @ react-dom.development.js:13580
validateProperties$2 @ react-dom.development.js:13600
validatePropertiesInDevelopment @ react-dom.development.js:13639
setInitialProperties$1 @ react-dom.development.js:13906
finalizeInitialChildren @ react-dom.development.js:14989
completeWork @ react-dom.development.js:8648
completeUnitOfWork @ react-dom.development.js:10132
performUnitOfWork @ react-dom.development.js:10234
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
fn @ bootstrap 93160685b6ed6746a2f2:88
0 @ registerServiceWorker.js:108
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap 93160685b6ed6746a2f2:724
(anonymous) @ bootstrap 93160685b6ed6746a2f2:724
index.js:2177 Warning: Invalid DOM property `class`. Did you mean `className`?
    in div (at App.js:13)
    in div (at App.js:11)
    in App (at index.js:7)
__stack_frame_overlay_proxy_console__ @ index.js:2177
printWarning @ warning.js:33
warning @ warning.js:57
validateProperty$1 @ react-dom.development.js:13539
warnUnknownProperties @ react-dom.development.js:13580
validateProperties$2 @ react-dom.development.js:13600
validatePropertiesInDevelopment @ react-dom.development.js:13639
setInitialProperties$1 @ react-dom.development.js:13906
finalizeInitialChildren @ react-dom.development.js:14989
completeWork @ react-dom.development.js:8648
completeUnitOfWork @ react-dom.development.js:10132
performUnitOfWork @ react-dom.development.js:10234
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
fn @ bootstrap 93160685b6ed6746a2f2:88
0 @ registerServiceWorker.js:108
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap 93160685b6ed6746a2f2:724
(anonymous) @ bootstrap 93160685b6ed6746a2f2:724
StoreContainer.js:16 {data: Array(3), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
webpackHotDevClient.js:136 ./src/components/NavBarHeader.js
  Line 10:  Links must not point to "#". Use a more descriptive href or use a button instead  jsx-a11y/href-no-hash
printWarnings @ webpackHotDevClient.js:136
handleWarnings @ webpackHotDevClient.js:153
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:206
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
webpackHotDevClient.js:136 ./src/components/GoogleMap.js
  Line 28:  'marker' is assigned a value but never used  no-unused-vars

最佳答案

使用 <Modal>而不是 <Modal.Dialog>

看看 example of a basic modal from react-bootstraps component page .

关于javascript - react-bootstrap modal 不会改变它的状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47893534/

上一篇：javascript - 搜索表格单元格的 jQuery 过滤器仅适用于某些项目，但并非全部

下一篇：javascript - 如何获取两个列表，允许用户从每个列表中进行选择以创建两个新列表并将新列表中的数据组合成 redux 中的单个结果

相关文章：

javascript - 在 React 中使用 moment & moment-timezone 创建运行时钟

javascript - d3.js slider : how to get value?

javascript - Bootstrap 下拉菜单和可点击父容器内的其他按钮

html - 如何垂直对齐当前使用列中的 bootstrap 4 类 img-fluid 的图像？

ios - 带 translate3d 的模态关闭按钮

javascript - 传播算子

javascript - 如何处理ReactJS中从组件B中的方法调用组件A中的方法的情况

javascript - 引用错误 : event is not defined in Firefox

javascript - 将回调值返回给主函数

javascript - 如何从异步调用返回响应？

©2024 IT工具网  联系我们