最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

React入门-7.表单

XAMPP下载 admin 880浏览 0评论
 React表单
表单是前后台数据交互非常重要的一种机制。一般,前端开发者需要从表单中接收用户输入,然后整理数据发送给后台开发者。那么,如何快速准确获取用户输入呢?VUE采用双向数据绑定,即表单项的值与模型中的对象绑定,一方改变另外一方也跟着改变。react要稍微复杂一些。

前面我们说过,组件中的数据一般是维护在state中的。那么,表单的值也应该功能维护在state中。那么如果维护呢? 可以将state中的值绑定到表单项中,然后为表单项绑定onChange事件,每次修改表单项的数据的时候该事件处理函数都会执行,这时候我们可以调用setState方法将表单项中的值再次设置到state中,由于state中对应的值改变,页面会执行重新渲染,最新的值也就渲染在页面上了。

不同的表单项绑定不同。

class MyForm extends React.Component{
constructor(props){
super(props);
this.state = {
username:”,
password:”,
gender:’男’,
address:’山西’,
description:”
};
}
handleSubmit=(event)=>{
console.log(this.state);
event.preventDefault();
}

// 每当表单元素状态改变的时候将表单元素中的值关联到state中。进而渲染到页面
handleChange=(event)=>{
let name = event.target.name

;
let value = event.target.value;
this.setState((state)=>({
[name]:value
}))
}

render(){
return (
<form onSubmit={this.handleSubmit}>
{JSON.stringify(this.state)}
<hr/>
用户名:
<input
type=”text”
name=”username”
value={this.state.username}
onChange={this.handleChange}/> <br/>
密码:
<input
type=”password”
name=”password”
value={this.state.password}
onChange={this.handleChange}/><br/>
性别:
<label>
<input
type=”radio”
name=”gender”
value=”男”
onChange={this.handleChange}
checked={this.state.gender==”男”?true:false}/>男
</label>
<label>
<input
type=”radio”
name=”gender”
value=”女”
onChange={this.handleChange}
checked={this.state.gender==”女”?true:false}/>女
</label><br/>
地址:
<select name=”address”
value={this.state.address}
onChange={this.handleChange}>
<option value=”江苏”>江苏</option>
<option value=”山西”>山西</option>
<option value=”河南”>河南</option>
<option value=”陕西”>陕西</option>
</select>  <br/>
介绍:
<textarea
name=”description”
value={this.state.description}
onChange={this.handleChange}></textarea> <br/>
<input type=”submit” value=”保存”/>
</form>
)
}
}
ReactDOM.render(
<MyForm></MyForm>,
document.getElementById(‘app’)
)

转载请注明:XAMPP中文组官网 » React入门-7.表单

您必须 登录 才能发表评论!