h5 input react ref

h5 input 

文本：   <input type="text" name="username" value="账号" /><br />
密码：   <input type="password" name="password" /><br />
邮箱：   <input type="email" name="email" /><br />
搜索：   <input type="search" name="search" /><br />
URL：　　<input type="url" name="url" /><br />
年月日：　<input type="date" name="date" value="2016-06-13" /><br />
年月：   <input type="month" name="month" value="2016-06" /><br />
星期：　　<input type="week" name="week" value="2016-W23" /><br />
时间：　　<input type="time" name="time" value="15:00" /><br />
datetime-local:<input type="datetime-local" name="local" value="2016-06-18 15:02" /><br />
数字：　　<input type="number" name="number" /><br />
color：　<input type="color" name="color" /><br />
range滑块：<input type="range" value="100" />

react ref

 //当我们在DOM Element中使用ref时，回调函数将接收当前的DOM元素作为参数
    class Input extends React.Component {
        constructor(props){
            super(props);
        }
        componentDidMount(){
            this.textInput.focus(); // 自动获取焦点
        }
        render(){
            return (
                <div>
                    {this.props.name} <input ref={(value)=>{this.textInput =value}} type={this.props.type}></input>
                </div>
            )
        }
    }
    class Form extends React.Component {
        constructor(props){
            super(props);
        }
        render(){
            return (
                <div>
                    <Input name ={"username"} type={"text"}/>
                    <Input name ={"password"} type={"password"}/>
                    <Input name ={"email"} type={"email"}/>
                    <Input name ={"search"} type={"search"}/>
                    <Input name ={"url"} type={"url"}/>
                    <Input name ={"date"} type={"date"}/>
                    <Input name ={"month"} type={"month"}/>
                    <Input name ={"week"} type={"week"}/>
                    <Input name ={"time"} type={"time"}/>
                    <Input name ={"datetime-local"} type={"datetime-local"}/>
                    <Input name ={"number"} type={"number"}/>
                    <Input name ={"color"} type={"color"}/>
                    <Input name ={"range"} type={"range"}/>
                </div>
            )
        }
    }