@@ -53,46 +53,35 @@ const customStyles = {
53
53
// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
54
54
Modal .setAppElement (' #yourAppElement' )
55
55
56
- class App extends React .Component {
57
- constructor () {
58
- super ();
59
-
60
- this .state = {
61
- modalIsOpen: false
62
- };
63
-
64
- this .openModal = this .openModal .bind (this );
65
- this .afterOpenModal = this .afterOpenModal .bind (this );
66
- this .closeModal = this .closeModal .bind (this );
56
+ function App (){
57
+ var subtitle;
58
+ const [modalIsOpen ,setIsOpen ] = React .useState (false );
59
+ function openModal () {
60
+ setIsOpen (true );
67
61
}
68
62
69
- openModal () {
70
- this .setState ({modalIsOpen: true });
71
- }
72
-
73
- afterOpenModal () {
63
+ function afterOpenModal () {
74
64
// references are now sync'd and can be accessed.
75
- this . subtitle .style .color = ' #f00' ;
65
+ subtitle .style .color = ' #f00' ;
76
66
}
77
67
78
- closeModal () {
79
- this . setState ({modalIsOpen : false } );
68
+ function closeModal (){
69
+ setIsOpen ( false );
80
70
}
81
71
82
- render () {
83
72
return (
84
73
< div>
85
- < button onClick= {this . openModal }> Open Modal< / button>
74
+ < button onClick= {openModal}> Open Modal< / button>
86
75
< Modal
87
- isOpen= {this . state . modalIsOpen }
88
- onAfterOpen= {this . afterOpenModal }
89
- onRequestClose= {this . closeModal }
76
+ isOpen= {modalIsOpen}
77
+ onAfterOpen= {afterOpenModal}
78
+ onRequestClose= {closeModal}
90
79
style= {customStyles}
91
80
contentLabel= " Example Modal"
92
81
>
93
82
94
- < h2 ref= {subtitle => this . subtitle = subtitle }> Hello< / h2>
95
- < button onClick= {this . closeModal }> close< / button>
83
+ < h2 ref= {_subtitle => ( subtitle = _subtitle) }> Hello< / h2>
84
+ < button onClick= {closeModal}> close< / button>
96
85
< div> I am a modal< / div>
97
86
< form>
98
87
< input / >
@@ -104,7 +93,6 @@ class App extends React.Component {
104
93
< / Modal>
105
94
< / div>
106
95
);
107
- }
108
96
}
109
97
110
98
ReactDOM .render (< App / > , appElement);
0 commit comments