@@ -122,9 +122,9 @@ You can use this to remove scrolling on the the body while the modal is open.
122
122
Inside an app:
123
123
124
124
``` js
125
- var React = require ( ' react' ) ;
126
- var ReactDOM = require ( ' react-dom' ) ;
127
- var Modal = require ( ' react-modal' ) ;
125
+ import React from ' react' ;
126
+ import ReactDOM from ' react-dom' ;
127
+ import Modal from ' react-modal' ;
128
128
129
129
130
130
/*
@@ -139,7 +139,7 @@ Modal.setAppElement(appElement);
139
139
Modal.setAppElement('#your-app-element');
140
140
141
141
*/
142
- var appElement = document .getElementById (' your-app-element' );
142
+ const appElement = document .getElementById (' your-app-element' );
143
143
144
144
145
145
@@ -155,26 +155,33 @@ const customStyles = {
155
155
};
156
156
157
157
158
- var App = React .createClass ({
158
+ class App extends React .Component {
159
+ constructor () {
160
+ super ();
159
161
160
- getInitialState : function () {
161
- return { modalIsOpen: false };
162
- },
162
+ this .state = {
163
+ modalIsOpen: false
164
+ };
165
+
166
+ this .openModal = this .openModal .bind (this );
167
+ this .afterOpenModal = this .afterOpenModal .bind (this );
168
+ this .closeModal = this .closeModal .bind (this );
169
+ }
163
170
164
- openModal : function () {
171
+ openModal () {
165
172
this .setState ({modalIsOpen: true });
166
- },
173
+ }
167
174
168
- afterOpenModal : function () {
175
+ afterOpenModal () {
169
176
// references are now sync'd and can be accessed.
170
177
this .refs .subtitle .style .color = ' #f00' ;
171
- },
178
+ }
172
179
173
- closeModal : function () {
180
+ closeModal () {
174
181
this .setState ({modalIsOpen: false });
175
- },
182
+ }
176
183
177
- render : function () {
184
+ render () {
178
185
return (
179
186
< div>
180
187
< button onClick= {this .openModal }> Open Modal< / button>
@@ -200,9 +207,9 @@ var App = React.createClass({
200
207
< / div>
201
208
);
202
209
}
203
- });
210
+ }
204
211
205
- ReactDOM .render (< App/ > , appElement);
212
+ ReactDOM .render (< App / > , appElement);
206
213
```
207
214
# Testing
208
215
0 commit comments