React 自定义组件与组件复用

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

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

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

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

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