반응 부트 스트랩 모달이 상태를 변경하지 않음

도움이 필요하십니까? 나는 반응 애플 리케이션 코딩 오전. 최신 버전을 설치했습니다 : react 16.2.0, react-dom 16.2.0, react-bootstrap 0.31.5, 반응 오버레이 0.7.4반응 부트 스트랩 모달이 상태를 변경하지 않음

그 구성 요소에는 state.show = {false}가 있고 페이지로드에 나타나서는 안됩니다. 그러나 그것은 나타난다. 또한 '닫기'버튼은 부울 값을 구성 요소의 상태로 전달하지 않습니다.

이

내 모달 구성 요소입니다

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();

: 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입니다 : 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;

이가 삽입되는 위치입니다

및 index.html :

01 23,516,

<!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

출처

2017-12-19 AlbertS

사용 <Modal> 대신 <Modal.Dialog>

는 example of a basic modal from react-bootstraps component page를 살펴 보자.

출처

2017-12-19 19:28:23

AAA !!!! 해결책을 찾기 위해 2 일을 보냈습니다. 고맙습니다! 동일한 페이지에서 정적 모달 예제를 사용하고 아래 예제에서 요소를 추가했습니다. – AlbertS

반응 부트 스트랩 모달이 상태를 변경하지 않음

답변

관련 문제