首先给大家弥补一个错误，也是因为自己知识点不到位，查阅资料才发现的哈！
约束性和非约束性组件
非约束性：<input defaultValue=" a " /> 这个defaultValue其实就是原生中的value属性，这样写出来的组件其
value就是用户输入的内容，React不管理输入的过程
约束性组件：<input value={this.state.a} onChange={this.handleChange} /> 这里要注意有value 必须有onChange。那么这里的value不再是一个写死的值，他是this.state.a并且由this.handleChange管理，此时的value就不是用户输入的内容而是onChange事件触发之后重新触发的渲染
如果我们需要形成mvvm类似的效果，就需要使用value onChange，如果只是单纯的mv，直接使用defaultValue
概念比较抽象，记不住算了！！！╭(╯^╰)╮
接下来写一个稍微有点可能像实际开发的
import React,{Component} from 'react'
class New extends Component {
constructor(props) {
super(props);
this.state = {
msg:'表单',
name:'',
sex:1,
citys:[ //select
'北京','上海','广州'
],
hobby:[ //checkbox
{
'title':'睡觉',
'checked':true
},
{
'title':'吃饭',
'checked':true
},
{
'title':'打游戏',
'checked':true
}
]
};
}
render() {
return (
<div>
</div>
);
}
}
export default New;
这是我的初始化代码可以copy一哈，稍微加点代码运用一下
import React,{Component} from 'react'
class New extends Component {
constructor(props) {
super(props);
this.state = {
msg:'表单',
name:'',
sex:1,
citys:[ //select
'北京','上海','广州'
],
hobby:[ //checkbox
{
'title':'睡觉',
'checked':true
},
{
'title':'吃饭',
'checked':true
},
{
'title':'打游戏',
'checked':true
}
]
};
}
handleName(ev){
this.setState({
name:ev.target.value
})
}
handleSubmit(ev){
ev.preventDefault()
console.log(this.state.name)
}
handleSex(ev){
this.setState({
sex:ev.target.value
})
}
render() {
return (
<div>
<h2>{this.state.msg}</h2>
<form onSubmit={this.handleSubmit.bind(this)}>
用户名：<input value={this.state.name} onChange={this.handleName.bind(this)} />
性别： <input type="radio" value="1" checked={this.state.sex==1} onChange={this.handleSex.bind(this)} />男
<input type="radio" value="2" checked={this.state.sex==2} onChange={this.handleSex.bind(this)} />女
<br/><br/><br/>
<input type="submit" defaultValue="提交"/>
</form>
</div>
);
}
}
export default New;
我觉得这个是比较简单，checked这种判断方法完全可以按照自己喜欢的设置，我比较懒就喜欢设置数字，看不懂多看几遍就没问题的，当然ev.preventDefault（）是阻止表单提交的默认事件
import React,{Component} from 'react'
class New extends Component {
constructor(props) {
super(props);
this.state = {
msg:'表单',
name:'',
city:'',
sex:1,
citys:[ //select
'北京','上海','广州'
],
hobby:[ //checkbox
{
'title':'睡觉',
'checked':true
},
{
'title':'吃饭',
'checked':true
},
{
'title':'打游戏',
'checked':true
}
]
};
}
handleName(ev){
this.setState({
name:ev.target.value
})
}
handleSubmit(ev){
ev.preventDefault()
console.log(this.state.name,this.state.sex,this.state.city)
}
handleSex(ev){
this.setState({
sex:ev.target.value
})
}
handleCity(ev){
this.setState({
city:ev.target.value
})
}
render() {
return (
<div>
<h2>{this.state.msg}</h2>
<form onSubmit={this.handleSubmit.bind(this)}>
用户名：<input value={this.state.name} onChange={this.handleName.bind(this)} />
性别： <input type="radio" value="1" checked={this.state.sex==1} onChange={this.handleSex.bind(this)} />男
<input type="radio" value="2" checked={this.state.sex==2} onChange={this.handleSex.bind(this)} />女
居住城市：<select value={this.state.city} onChange={this.handleCity.bind(this)}>
{
this.state.citys.map((v)=>{
return <option value={v} key={v}>{v}</option>
})
}
</select>
<br/><br/><br/>
<input type="submit" defaultValue="提交"/>
</form>
</div>
);
}
}
export default New;
需要注意的就是select的绑定，它是在select标签不是在option标签，可能大家没我这么笨，我经常搞错
import React,{Component} from 'react'
class New extends Component {
constructor(props) {
super(props);
this.state = {
msg:'表单',
name:'',
city:'',
sex:1,
citys:[ //select
'北京','上海','广州'
],
hobby:[ //checkbox
{
'title':'睡觉',
'checked':true
},
{
'title':'吃饭',
'checked':true
},
{
'title':'打游戏',
'checked':true
}
]
};
}
handleName(ev){
this.setState({
name:ev.target.value
})
}
handleSubmit(ev){
ev.preventDefault()
console.log(this.state.name,this.state.sex,this.state.city,this.state.hobby)
}
handleSex(ev){
this.setState({
sex:ev.target.value
})
}
handleCity(ev){
this.setState({
city:ev.target.value
})
}
handleHobby(i){
var hobby=this.state.hobby
hobby[i].checked=!hobby[i].checked
this.setState({
hobby:hobby
})
}
render() {
return (
<div>
<h2>{this.state.msg}</h2>
<form onSubmit={this.handleSubmit.bind(this)}>
用户名：<input value={this.state.name} onChange={this.handleName.bind(this)} /><br/><br/>
性别： <input type="radio" value="1" checked={this.state.sex==1} onChange={this.handleSex.bind(this)} />男
<input type="radio" value="2" checked={this.state.sex==2} onChange={this.handleSex.bind(this)} />女<br/><br/>
居住城市：<select value={this.state.city} onChange={this.handleCity.bind(this)}>
{
this.state.citys.map((v)=>{
return <option value={v} key={v}>{v}</option>
})
}
</select> <br/><br/>
爱好：{
this.state.hobby.map((v,i)=>{
return(
<div key={i}>
{v.title}<input type="checkbox" checked={v.checked} onChange={this.handleHobby.bind(this,i)}/>
</div>
)
})
}
<br/><br/><br/>
<input type="submit" defaultValue="提交"/>
</form>
</div>
);
}
}
export default New;
最后一个有点小绕，其实就是之前的bind复用，通过bind传递参数用来判断当前改变的是哪个值，然后改变state中的状态！打印的就是向后台传递的数据或者操作的值！
网友评论