React custom components and component reuse

Uncontrolled components and controllable components

How to use the non-controlled components:

<span style= "FONT-SIZE:18PX;" ><input type= "text" defaultvalue= "Hello World"/>      react.finddomnode (this.ref.input). Value</span >

How to use the controllable components:

<input type= "text" Defaultvalue={this.state.text}/>      var inputtext=this.state.text;

component-controllable benefits:

1. react-compliant data flow
2. Data is stored in state for ease of use
3. Easy processing of data

An instance of an uncontrolled component

var myform=react.createclass ({       handlesubmit:function (event) {           event.preventdefault ();           var helloto=reactdom.finddomnode (this.refs.helloTo). value;           alert (Helloto);       },        render:function () {            return <form onsubmit={this.handlesubmit}>                <input  type= "text" ref= "Helloto" defaultvalue= "Hello World"/><br/>                <button type= "Submit" >speak </button>            </form>        }    );    Reactdom.render (<myform/>,document.getelementbyid ("app"));

Examples of controllable components:

var myform=react.createclass ({       getinitialstate:function () {           return {               helloto: "Hello World"           }       } ,        handlesubmit:function (event) {            event.preventdefault ();            Alert (this.state.helloTo)        ,        handlechange:function (event) {            this.setstate ({helloto: Event.target.value})        ,        render:function () {            return <form Onsubmit={this.handlesubmit} >                <input type= "text" Value={this.state.helloto} onchange={this.handlechange}/>                <button type= " Submit ">submit</button>            </form>        }"    );    Reactdom.render (<myform/>,document.getelementbyid ("app"));

Multiplexing event handler functions
Two ways to reuse event handlers:
1 bind Multiplexing

Handlechange:function (name,event) {}      Onchange={this.handlechange.bind (this, "INPUT1")}

2 Name Multiplexing

Handlechange:function (event) {       var name=event.target.name;      }      Onchange={this.handlechange}

Bind component Reuse Instance

 var myform=react.createclass ({getinitialstate:function () {return{username: "",            Gender: "Man", Checked:true}}, Handlechange:function (name,event) {            var newstate={};            newstate[name]=name== "checked"? Event.target.checked:event.target.value;        This.setstate (newstate);            }, Handlesubmit:function (event) {Event.preventdefault ();        Console.log (this.state); }, Render:function () {return <form onsubmit={this.handlesubmit}> <input type= "Te  XT "Onchange={this.handlechange.bind (This," username ")}/><br/> <select Value={this.state.gender}                    Onchange={this.handlechange.bind (This, "gender")}> <option value= "1" > Male </option> <option value= "2" > Female </option> </select><br/> <label htm Lfor= "checkbox" > Agree User Agreement </label> <input id= "checkbox" type= "checkbox" value= "Agree" Checked={this.st                ate.checked} onchange={this.handlechange.bind (This, "checked")}/><br/>    <button type= "Submit" >submit</button> </form>}); Reactdom.render (<myform/>,document.getelementbyid ("app"));

Name Component Reuse Instance

           var myform=react.createclass ({getinitialstate:function () {return{username: ""            , Gender: "Man", Checked:true}}, Handlechange:function (event) {            var name=event.target.name;            var newstate={};            newstate[name]=name== "checked"? Event.target.checked:event.target.value;        This.setstate (Newstate,null);            }, Handlesubmit:function (event) {Event.preventdefault ();        Console.log (this.state); }, Render:function () {return <form onsubmit={this.handlesubmit}> <input type= "Te XT "Onchange={this.handlechange} name=" username "/><br/> <select value={this.state.gender} onCha Nge={this.handlechange} name= "Gender" > <option value= "1" > Men </option> & Lt;option value= "2" > Women </option> </select><br/> <label htmlfor= "checkbox" > Agree User Agreement </label> <input id= "checkbox" Type= "Chec                Kbox "value=" Agree "checked={this.state.checked} Onchange={this.handlechange} name=" Checked "        /><br/> <button type= "Submit" >submit</button> </form>    }    }); Reactdom.render (<myform/>,document.getelementbyid ("app"));

React custom components and component reuse