项目结构:
约束性和非约束性组件:
非约束性组:
这个 defaultValue 其实就是原生DOM中的 value 属性。
这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。
约束性组件:
这里,value属性不再是一个写死的值,他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。
不过React会优化这个渲染过程。看上去有点类似双休数据绑定
例子:Home.js
import React from 'react';
/*
约束性和非约束性组件:
非约束性组:<input type="text" defaultValue="a" /> 这个 defaultValue 其实就是原生DOM中的 value 属性。
这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。
约束性组件:<input value={this.state.username} type="text" onChange={this.handleUsername} />
这里,value属性不再是一个写死的值,他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。
不过React会优化这个渲染过程。看上去有点类似双休数据绑定
*/
class Home extends React.Component {
constructor(props){
super(props);
this.state={
username:'11111'
}
}
// 监听输入框
handleUsername=(e)=>{
this.setState({
username:e.target.value
})
}
render() {
return (
<div>
<h1>React表单</h1>
{/* MVVM */}
{/*约束性组件*/}
{/* 设置默认值,并监听输入框中的数据 */}
<input type="text" value={this.state.username} onChange={this.handleUsername} />
{this.state.username}
<br />
{/* MV */}
{/* 非约束性组件 */}
{/* defaultValue只是设置默认值 */}
<input type="text" defaultValue={this.state.username} />
</div>
);
}
}
export default Home;
常见标签的使用,并获取值
input标签 输入框,单选框,多选框 提交按钮
select 选择标签
textarea标签
from 标签
例子:Home2.js
import React from 'react';
/**
常见标签的使用,并获取值
input标签 输入框,单选框,多选框 提交按钮
select 选择标签
textarea标签
from 标签
*/
class ReactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:"react表单",
name:'',
sex:'1',
city:'',
citys:[
'北京','上海','深圳'
],
hobby:[
{
'title':"睡觉",
'checked':true
},
{
'title':"吃饭",
'checked':false
},
{
'title':"敲代码",
'checked':true
}
],
info:''
};
}
// 提交表单时获取值
handelSubmit=(event)=>{
//阻止submit的提交事件
event.preventDefault();
console.log("获取用户名:"+this.state.name);
console.log("获取性别:"+this.state.sex);
console.log("获取城市:"+this.state.city);
console.log(this.state.hobby);
console.log("获取备注:"+this.state.info);
}
handelName=(event)=>{
this.setState({
name:event.target.value
})
}
handelSex=(event)=>{
this.setState({
sex:event.target.value
})
}
handelCity=(event)=>{
this.setState({
city:event.target.value
})
}
handelHobby=(key)=>{
var hobby=this.state.hobby;
hobby[key].checked=!hobby[key].checked;
this.setState({
hobby:hobby
})
}
handleInfo=(event)=>{
this.setState({
info:event.target.value
})
}
render() {
return (
<div>
<h2>{this.state.msg}</h2>
<form onSubmit={this.handelSubmit}>
用户名: <input type="text" value={this.state.name} onChange={this.handelName}/> <br /><br />
性别: <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}/>女 <br /><br />
居住城市:
<select value={this.state.city} onChange={this.handelCity}>
{
this.state.citys.map(function(value,key){
return <option key={key}>{value}</option>
})
}
</select>
<br /><br />
爱好:
{
// 注意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>
)
})
}
<br /><br />
备注:<textarea vlaue={this.state.info} onChange={this.handleInfo} />
<input type="submit" defaultValue="提交"/>
<br /><br /> <br /><br />
</form>
</div>
);
}
}
export default ReactForm;
运行:
源码下载:
https://download.csdn.net/download/zhaihaohao1/10980273
rdemo6