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中有关FileList和File类的属性进行操作。

//表单的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('请选择图片格式的文件')
        }
    }
}