Browse Source

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.
main
Chris 8 years ago
committed by Brandon Dail
parent
commit
dd5a665d42
  1. 15
      docs/react-without-es6.md

15
docs/react-without-es6.md

@ -97,12 +97,13 @@ In React components declared as ES6 classes, methods follow the same semantics a
class SayHello extends React.Component { class SayHello extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { message: 'Hello!' };
// This line is important! // This line is important!
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);
} }
handleClick() { handleClick() {
alert('Hello!'); alert(this.state.message);
} }
render() { render() {
@ -120,8 +121,12 @@ With `React.createClass()`, this is not necessary because it binds all methods:
```javascript ```javascript
var SayHello = React.createClass({ var SayHello = React.createClass({
getInitialState: function() {
return { message: 'Hello!' };
},
handleClick: function() { handleClick: function() {
alert('Hello!'); alert(this.state.message);
}, },
render: function() { render: function() {
@ -141,10 +146,14 @@ If the boilerplate code is too unattractive to you, you may enable the **experim
```javascript ```javascript
class SayHello extends React.Component { class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = { message: 'Hello!' };
}
// WARNING: this syntax is experimental! // WARNING: this syntax is experimental!
// Using an arrow here binds the method: // Using an arrow here binds the method:
handleClick = () => { handleClick = () => {
alert('Hello!'); alert(this.state.message);
} }
render() { render() {

Loading…
Cancel
Save