React 非受控表单组件

表单元素不采用value-onChange/checked-onChange方式来对state区中的数据进行双向绑定,我们就说表单元素是非受控表单元素。
非受控表单元素需要使用<form></form>标记对。

一、非受控文本框

  1. 非受控文本框采用defaultValue来设置初始数据,defaultValue只能设置一次。
  2. <form>带有一个onSubmit事件,当表单中具有数据提交功能的按钮单击时,会自动执行这个事件。
  3. 非受控文本框中设置一个ref属性,在onSubmit事件中通过this.refs来获取文本框中用户输入的内容。
<form onSubmit={()=>this.search(event)}>
	<div className="form-group">
		<label>产品:</label>
		<input ref="product" type="text" defaultValue="默认值" className="form-control" />
	</div>
	<div className="form-group">
		<button type="submit" className="btn btn-success">搜索</button>
	</div>
</form>


//表单的onSubmit事件
search(event){
    //this.refs:ref属性在表单元素中的取值:表单元素的DOM节点对象
    let {product,searchEngine,upload} = this.refs; //只要是对象,都可以通过匹配模式的方式进行解构
    event.preventDefault(); //取消表单默认提交行为
    console.log(this.refs.product.value);	//解构前
    console.log(product.value);	//结构后
}

二、非受控select菜单

  1. 非受控<select>菜单的处理方式和非受控文本框的处理方式一致。
  2. 在表单的onSubmit事件中,this.refs是一个存储了所有利用ref属性进行命名的节点的对象。
constructor(props){
	super(props);
	this.state = {
		engine:['百度','搜狗','360搜索','Google']
	}
}


<form onSubmit={()=>this.search(event)}>
	<div className="form-group">
	<label>搜索引擎:</label>
		<select ref="searchEngine" className="form-control">
		{
			this.state.engine.map((item,index)=>{
				return(
					<option value={item} key={index}>{item}</option>
				)
			})
		}
		</select>
	</div>
</form>


//表单的onSubmit事件
search(event){
	console.log(this.refs);    // {ref属性在表单元素中的取值:表单元素的DOM节点对象}
}

三、文件域

  1. React中的文件域都是非受控的,没有受控的文件域。
  2. 通过文件域的ref属性可以得到文件域的DOM节点,在借助H5中有关FileListFile类的属性进行操作。
//表单的onSubmit事件
search(event){
    //this.refs:ref属性在表单元素中的取值:表单元素的DOM节点对象
    let {product,searchEngine,upload} = this.refs; //只要是对象,都可以通过匹配模式的方式进行解构
    event.preventDefault(); //取消表单默认提交行为
    if(upload.files.length == 0){
        alert('请选择上传的文件')
    }else{
        console.log(upload.files);  //FilesList类
        console.log(upload.files.item(0));  //File类
        let file = upload.files.item(0);
        let reg = /^image\/(jpg|jpeg|png|gif)$/;
        console.log(file.type);  //用户上传文件的MIME类型
        if(reg.test(file.type)){
            let blob = window.URL.createObjectURL(file);	//获取图片的blob地址
            this.setState({
                imgUrl:blob
            })
        }else{
            alert('请选择图片格式的文件')
        }
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值