React 自訂群組件與組件複用

標籤：

不可控組件和可控組件
     
 不可控組件使用方式：
      

<span style="font-size:18px;"><input type="text" defaultValue="hello world"/>      React.findDomNode(this.ref.input).value</span>

可控組件使用方式：
      

<input type="text" defaultValue={this.state.text}/>      var inputText=this.state.text;

組件可控的好處：

1.              符合React的資料流
2.        資料存放區在state中，便於使用
3.        便於對資料進行處理

不可控組件執行個體

 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"));

可控組件執行個體：

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"));

複用事件處理函數
事件處理函數的兩種複用方式：
 1 bind複用
      

handleChange:function(name,event){}      onChange={this.handleChange.bind(this,"input1")}

 2 name複用
     

handleChange:function(event){       var name=event.target.name;      }      onChange={this.handleChange}

bind組件複用執行個體

 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="text" onChange={this.handleChange.bind(this,"username")}/><br/>                <select value={this.state.gender} onChange={this.handleChange.bind(this,"gender")}>                    <option value="1">男</option>                    <option value="2">女</option>                </select><br/>                <label htmlFor="checkbox">同意使用者協議</label>                <input id="checkbox" type="checkbox"  value="agree" checked={this.state.checked}                       onChange={this.handleChange.bind(this,"checked")}                /><br/>                <button type="submit">submit</button>            </form>        }    });    ReactDOM.render(<MyForm/>,document.getElementById("app"));

name組件複用執行個體

           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="text" onChange={this.handleChange} name="username"/><br/>                <select value={this.state.gender} onChange={this.handleChange} name="gender">                    <option value="1">男</option>                    <option value="2">女</option>                </select><br/>                <label htmlFor="checkbox">同意使用者協議</label>                <input id="checkbox" type="checkbox"  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 自訂群組件與組件複用