表单元素不采用value-onChange/checked-onChange方式来对state区中的数据进行双向绑定,我们就说表单元素是非受控表单元素。
非受控表单元素需要使用<form></form>
标记对。
一、非受控文本框
- 非受控文本框采用
defaultValue
来设置初始数据,defaultValue
只能设置一次。 <form>
带有一个onSubmit
事件,当表单中具有数据提交功能的按钮单击时,会自动执行这个事件。- 非受控文本框中设置一个
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菜单
- 非受控
<select>
菜单的处理方式和非受控文本框的处理方式一致。 - 在表单的
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节点对象}
}
三、文件域
- React中的文件域都是非受控的,没有受控的文件域。
- 通过文件域的
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('请选择图片格式的文件')
}
}
}