One, the component
Second, the Code
1 <!DOCTYPE HTML>2 <HTMLLang= "ZH-CN">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Mixin</title>6 </Head>7 <Body>8 <Scriptsrc= "./react-0.13.2/react-0.13.2/build/react-with-addons.js"></Script>9 <Scriptsrc= "./react-0.13.2/react-0.13.2/build/jsxtransformer.js"></Script>Ten <Scripttype= "TEXT/JSX"> One //var bindingexample = React.createclass ({ A //getinitialstate:function () { - //return { - //text: ' the // } - // }, - //Handlechange:function (event) { - //this.setstate ({text:event.target.value}) + // }, - //render:function () { + //return <div> A //<input type= "text" placeholder= "Please enter content" Onchange={this.handlechange}/> at //<p>{this.state.text}</p> - //</div> - // } - // }) - varbindingmixin= { - HandleChange:function(key) { in var that= This - varnewstate= {} to return function(event) { + - Newstate[key]=Event.target.value the that.setstate (newstate) * } $ }Panax Notoginseng } - varBindingexample=React.createclass ({ the mixins: [React.addons.LinkedStateMixin], + getinitialstate:function() { A return { the Text:"', + Comment:"', - } $ }, $ Render:function() { - return <Div> - <input type="text"placeholder="Please enter the content"Valuelink={ This. Linkstate ('text')} /> the <textarea Valuelink={ This. Linkstate ('Comment')}></textarea> - <P>{ This. State.text}</p>Wuyi <P>{ This. state.comment}</p> the </div> - } Wu }) - React.render (<Bindingexample></Bindingexample>, document.body); About </Script> $ </Body> - </HTML>
React Component-mixin
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
