It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synchronize. Luckily, React provides a version of the toolkit with a selection of available addons. This lesson is going to dig into ReactLink, and how this addon can give you two-way binding.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Lesson 15: dynamically create componenets</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<style>
body {
margin: 25px;
}
</style>
</head>
<body>
<div id="panel"></div>
<script type="text/jsx">
/** @jsx React.DOM */
var App = React.createClass({
getInitialState:function(){
return {
name: '',
email: ''
}
},
update: function () {
this.setState({
name: this.refs.name.getDOMNode().value,
email: this.refs.email.getDOMNode().value
})
},
render:function(){
return (
<form>
<div>
<input type="text" ref="name" onChange={this.update} placeholder="Name"/>
<label>*{this.state.name}*</label>
</div>
<div>
<input type="text" ref="email" onChange={this.update} placeholder="Email"/>
<label>*{this.state.email}*</label>
</div>
</form>
);
}
});
React.render(<App />, document.getElementById('panel'));
</script>
</body>
</html>
Use addon: ReactLink
1. include the script:
script src="https://fb.me/react-with-addons-0.13.3.js"></script>
2. Add mixin:
mixins: [React.addons.LinkedStateMixin],
3. Use valueLink={this.linkState('name')} instead of 'ref' and 'onChange':
<input valueLink={this.linkState('name')} type="text" placeholder="Name" />
Code:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Lesson 15: dynamically create componenets</title> <script src="https://fb.me/react-with-addons-0.13.3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> <style> body { margin: 25px; } </style> </head> <body> <div id="panel"></div> <script type="text/jsx"> /** @jsx React.DOM */ var App = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState:function(){ return { name: '', email: '' } }, render:function(){ return ( <form> <div> <input valueLink={this.linkState('name')} type="text" placeholder="Name" /> <label>*{this.state.name}*</label> </div> <div> <input valueLink={this.linkState('email')} type="text" placeholder="Email" /> <label>*{this.state.email}*</label> </div> </form> ); } }); React.render(<App />, document.getElementById('panel')); </script> </body> </html>