update example to use `this.state` (#8425)
- In the previous example, the code works even without using bind(this) in the constructor. - the reason being handleClick doesn't even use `this` and its just calling the global function alert. - this change make use of this via access this.state.
Chris committed
Dec 11, 2016 at 21:41 UTC
39695dcd36ca8f461ccfbe938aa0ccbe6e3ad83d
1 file changed
+12
-3
docs/docs/react-without-es6.md
+12
-3
@@ -97,12 +97,13 @@ In React components declared as ES6 classes, methods follow the same semantics a
97
class SayHello extends React.Component {
98
constructor(props) {
99
super(props);
100
+ this.state = { message: 'Hello!' };
101
// This line is important!
102
this.handleClick = this.handleClick.bind(this);
103
}
104
105
handleClick() {
105
- alert('Hello!');
106
+ alert(this.state.message);
107
}
108
109
render() {
@@ -120,8 +121,12 @@ With `React.createClass()`, this is not necessary because it binds all methods:
121
122
```javascript
123
var SayHello = React.createClass({
124
+ getInitialState: function() {
125
+ return { message: 'Hello!' };
126
+ },
127
+
128
handleClick: function() {
124
- alert('Hello!');
129
+ alert(this.state.message);
130
},
131
132
render: function() {
@@ -141,10 +146,14 @@ If the boilerplate code is too unattractive to you, you may enable the **experim
146
147
```javascript
148
class SayHello extends React.Component {
149
+ constructor(props) {
150
+ super(props);
151
+ this.state = { message: 'Hello!' };
152
+ }
153
// WARNING: this syntax is experimental!
154
// Using an arrow here binds the method:
155
handleClick = () => {
147
- alert('Hello!');
156
+ alert(this.state.message);
157
}
158
159
render() {