React 基础入门(五):Form表单

本文共有2459个字,关键词:ReactReact入门React教程

React Form表单

state数据
this.state = {  
    msg:"react表单",
    name:'',  
    sex:'1',     
    city:'',      
    citys:[ 
        '北京','上海','深圳'            
    ],
    hobby:[   
        {  
            'title':"睡觉",
            'checked':true
        },
        {  
            'title':"吃饭",
            'checked':false
        },
        {  
            'title':"敲代码",
            'checked':true
        }
    ],
    info:''
};
文本输入框(text)
<input type="text" value={this.state.name}  onChange={this.handelName}/>
handelName=(e)=>{
    this.setState({

        name:e.target.value
    })
}
单选框(radio)
性别:    
<input type="radio" value="1" checked={this.state.sex==1}  onChange={this.handelSex}/>男 
<input type="radio"  value="2" checked={this.state.sex==2}  onChange={this.handelSex}/>女
handelSex=(e)=>{
    this.setState({
        sex:e.target.value
    })
}
下拉框(select)
 居住城市:  
<select value={this.state.city} onChange={this.handelCity}>
    {
        this.state.citys.map(function(value,key){

            return <option key={key}>{value}</option>
        })
    }
</select>
handelCity=(e)=>{
    this.setState({
        city:e.target.value
    })

}
多选(checkbox)
爱好:   
{
    // 注意this指向
    this.state.hobby.map((value,key)=>{
        return (
           <span key={key}>
                <input type="checkbox"  checked={value.checked}  onChange={this.handelHobby.bind(this,key)}/> {value.title} 
           </span>
        )
    })
}
handelHobby=(key)=>{
    var hobby=this.state.hobby;
    hobby[key].checked=!hobby[key].checked;
    this.setState({
        hobby:hobby
    })
}
多行文本框 (textarea)
备注:<textarea vlaue={this.state.info}  onChange={this.handleInfo} />
this.handleInfo=this.handleInfo.bind(this);
handleInfo(e){
    this.setState({
        info:e.target.value
    })
}
表单提交(submit)
<form onSubmit={this.handelSubmit}>
    <input type="submit"  defaultValue="提交"/>
</form>
handelSubmit=(e)=>{
        //阻止submit的提交事件
        e.preventDefault();
           //输出表单数据
        console.log(this.state.name,this.state.sex,this.state.city,this.state.hobby,this.state.info);
}

LGS

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

版权声明:本文为作者原创,如需转载须联系作者本人同意,未经作者本人同意不得擅自转载。本站微信公众号:苏米志,敬请关注!
广告还在招~
添加新评论
暂无评论