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 are going to dig into reactlink, and how this addon can give you two-way binding.
<!doctype html>body {margin:25px; } </style>/** @jsx react.dom*/ varAPP =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> <inpu T type= "text" ref= "email" onchange={ This. Update} placeholder= "Email"/> <label>*{ This.state.email}*</label> </div> </form> ); } }); React.render (<app/>, document.getElementById (' Panel '));</script></body>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 ':
<valuelinktype= "text" placeholder= "Name" />
Code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>React Lesson 15:dynamically Create componenets</title> <Scriptsrc= "Https://fb.me/react-with-addons-0.13.3.js"></Script> <Scriptsrc= "Https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></Script> <style>Body{margin:25px; } </style></Head><Body><DivID= "Panel"></Div><Scripttype= "TEXT/JSX"> /** @jsx react.dom*/ varApp=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>[React] React Fundamentals:with-addons-reactlink
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
