Home > Developer > Web Develop
First look at a basic HTML as to the JS ask the price of everyone to download on the official website.
<HTML><Head><Scriptsrc=".. /build/react.js "></Script><Scriptsrc=".. /build/react-dom.js "></Script><Scriptsrc=".. /build/browser.min.js "></Script></Head><Body><DivID= "Test"></Div><Scripttype= "Text/babel"></Script></Body></HTML>
1 Enter a value in the input box click the button to get the value in the Console.log print.
var Testref = React.createclass ({ function() { Console.log (this. Refs). Inputref.value) , render:function() { return (<div> <input type= "text" ref= "Inputref"/> <input type= "button" value= "text" onclick={this. handleclick}/> </div>); } }); Reactdom.render ( <testref/>, document.getElementById (' Test ') );2
2 usage of build communication properties
/**
* When the value of the input box changes, the value after the above hello is also changed
* When Test1 build creates execution Getinitialstate (this method only runs once when creating a build) method sets the default value of the state name to NULL
* Then perform render method rendering at this time call test build because the value of the Name property in the build test is empty so the page first displays Hello Word
* When the user enters data in the input box, the OnChange executes the HandleChange method in this method
*setstate Update the status of name as the value of the input box. At this point the value of the property name in the build test changes so it changes
*/
varTest =React.createclass ({render:function(){ return<div>hello,{ This. props.name? This. Props.name: ' word! '}! </div>; } }); varTest1 =React.createclass ({getinitialstate:function(){ return{Name: '}; }, HandleChange:function(event) { This. SetState ({name:event.target.value})}, Render:function(){ return( <div> <test name={ This.state.name}/> <input type= "text" onchange={ This.handlechange}/> </div> ); } }); Reactdom.render (<test1/>, document.getElementById (' test ')) );
3
Use of the build Communication State property
/**
* Status, usage of attributes
* Scene: Click Submit to get the value of textarea and select selected value. Print it out with Console.log.
* The last render rendering is Test1, so look at the Test1 when the build is created, define 2 states names Arrays Selectvalue
* Rendering time also loaded <Test> build to the build set a property selectname value equals Test1 in the state selectvalue
* When the value of the dropdown box in the build Test1 is changed, the Handleonchange method is set to the value of selectvalue in the drop-down box.
* Set state Inputvalue when created in test build when the value of the input box is changed Handleone method
* Set the value of the status Inputvalue to the value of the input box. When you click Submit. Handletwo method gets the value of the state inputvalue and the values of the property selectname
*
varTest =React.createclass ({getinitialstate:function(){ return{inputvalue: '}; }, Handleone:function(event) { This. SetState ({inputValue:event.target.value}); }, Handletwo:function() {Console.log ("TextArea value is:" + This. state.inputvalue+ "----Selectvalue:" + This. Props.selectname); }, Render:function(){ return ( <div> <textarea placeholder= "Please input string" onchange={ This.handleone}> </textarea> <input type= "button" value= "Submit" onclick={ This.handletwo}/> </div> ); } }); varTest1 =React.createclass ({getinitialstate:function(){ return{names:[' Xiaoming ', ' Xiaowang ', ' Xiaohong '], Selectvalue:‘‘,}}, Handleonchange:function(event) { This. SetState ({selectvalue:event.target.value}); }, Render:function(){ varOptionarr = []; for(varOptioninch This. State.names) {Optionarr.push (<option Key={option} value={ This. state.names[option]}>{ This.state.names[option]}</option>); }; return( <div> <select onchange={ This.handleonchange}>{Optionarr}</select> <test selectname={ This.state.selectvalue}/> </div> ); } }); Reactdom.render (<test1/>,document.getelementbyid (' test '));
*/
React.js various small test notes
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
