React 自定义组件与组件复用

来源：互联网发布：海尔热水器电死人知乎编辑：程序博客网时间：2024/06/07 02:39

不可控组件和可控组件

不可控组件使用方式：

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

组件可控的好处：

符合React的数据流
数据存储在state中，便于使用
便于对数据进行处理

不可控组件实例

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

0 0