|
|
@ -33,14 +33,14 @@ Here's a simple form example without using `ReactLink`: |
|
|
|
|
|
|
|
var NoLink = React.createClass({ |
|
|
|
getInitialState: function() { |
|
|
|
return {value: 'Hello!'}; |
|
|
|
return {message: 'Hello!'}; |
|
|
|
}, |
|
|
|
handleChange: function(event) { |
|
|
|
this.setState({value: event.target.value}); |
|
|
|
this.setState({message: event.target.value}); |
|
|
|
}, |
|
|
|
render: function() { |
|
|
|
var value = this.state.value; |
|
|
|
return <input type="text" value={value} onChange={this.handleChange} />; |
|
|
|
var message = this.state.message; |
|
|
|
return <input type="text" value={message} onChange={this.handleChange} />; |
|
|
|
} |
|
|
|
}); |
|
|
|
``` |
|
|
@ -53,10 +53,10 @@ This works really well and it's very clear how data is flowing, however with a l |
|
|
|
var WithLink = React.createClass({ |
|
|
|
mixins: [React.addons.LinkedStateMixin], |
|
|
|
getInitialState: function() { |
|
|
|
return {value: 'Hello!'}; |
|
|
|
return {message: 'Hello!'}; |
|
|
|
}, |
|
|
|
render: function() { |
|
|
|
return <input type="text" valueLink={this.linkState('value')} />; |
|
|
|
return <input type="text" valueLink={this.linkState('message')} />; |
|
|
|
} |
|
|
|
}); |
|
|
|
``` |
|
|
@ -82,14 +82,14 @@ There are two sides to `ReactLink`: the place where you create the `ReactLink` i |
|
|
|
|
|
|
|
var WithoutMixin = React.createClass({ |
|
|
|
getInitialState: function() { |
|
|
|
return {value: 'Hello!'}; |
|
|
|
return {message: 'Hello!'}; |
|
|
|
}, |
|
|
|
handleChange: function(newValue) { |
|
|
|
this.setState({value: newValue}); |
|
|
|
this.setState({message: newValue}); |
|
|
|
}, |
|
|
|
render: function() { |
|
|
|
var valueLink = { |
|
|
|
value: this.state.value, |
|
|
|
value: this.state.message, |
|
|
|
requestChange: this.handleChange |
|
|
|
}; |
|
|
|
return <input type="text" valueLink={valueLink} />; |
|
|
@ -107,10 +107,10 @@ As you can see, `ReactLink` objects are very simple objects that just have a `va |
|
|
|
var WithoutLink = React.createClass({ |
|
|
|
mixins: [React.addons.LinkedStateMixin], |
|
|
|
getInitialState: function() { |
|
|
|
return {value: 'Hello!'}; |
|
|
|
return {message: 'Hello!'}; |
|
|
|
}, |
|
|
|
render: function() { |
|
|
|
var valueLink = this.linkState('value'); |
|
|
|
var valueLink = this.linkState('message'); |
|
|
|
var handleChange = function(e) { |
|
|
|
valueLink.requestChange(e.target.value); |
|
|
|
}; |
|
|
|