react-bootstrap模态不会改变其状态

时间：2017-12-19 18:59:49

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

需要帮助！我正在编写反应应用程序。 我安装了最新版本：react 16.2.0，react-dom 16.2.0，react-bootstrap 0.31.5，react-overlays 0.7.4

我希望该组件有state.show = {false}，并且不应该出现在页面加载上。但它似乎。按钮＆＃39;关闭＆＃39;没有将布尔值传递给组件的状态。

这是我的模态组件：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;

这是插入的地方： App.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

1 个答案:

答案 0 :(得分：1)

使用<Modal>代替<Modal.Dialog>

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

相关问题
最新问题