效果图
代码:
import React, { Component } from 'react'
import './from.css'
class Parent extends Component {
aihao = [
{
name: "唱歌",
value: "sing",
ischecked: false
},
{
name: "跳舞",
value: "dance",
ischecked: false
},
{
name: "阅读",
value: "reading",
ischecked: false
},
{
name: "写代码",
value: "codding",
ischecked: false
},
]
start = {
user: {
name: '',
pass: '',
sex: '',
habby: ["sing", "reading"],
job: "",
des: '',
isAgree: false
}
}
//最原始的代码 ===>第一步
// classname(e){
// var user=this.start.user
// user.name=e.target.value
// this.setState({
// user
// })
// }
// classpass(e){
// var user=this.start.user
// user.pass=e.target.value
// this.setState({
// user
// })
// }
componentDidMount() {
//在查看的情况下 ====>最后一步
//this.aihao(服务器赋值是)本身状态是ischecked是false时(没有选中) 当this.start.user.hooby有值 ( 比如:habby: ["sing", "reading"],)
//需要在页面一加载 就进行判断
this.aihao.forEach(item => {
//当this.start.user.habby有值的情况下
if (this.start.user.habby.some(i => {
return i == item.value
})) {
//this.aihao.ischecked就为true
item.ischecked = true
} else {
//否则this.aihao.ischecked就为false
item.ischecked = false
}
})
}
//e事件源 通过事件源得到当前的input的value
//props input框类型
//index 针对爱好多选
classuser(e, props, index) {
var user = this.start.user
switch (props) {
case 'isAgree':
//得到我同意的CheckBox的checked的状态(就是 是true还是false)====>第二步
user[props] = e.target.checked
break;
//===>第三步
case 'habby':
//得到爱好CheckBox的checked 是true还是false
this.aihao[index].ischecked = !this.aihao[index].ischecked
//得到爱好CheckBox的checked是true的input框
var arr = this.aihao.filter(item => {
return item.ischecked
})
console.log(arr)
//重新创建一个数组 得到爱好checkbox被checked事true的数组值
user[props] = arr.map(item => item.value)
// console.log(arr2);
// console.log(this.aihao);
break
default:
//得到普通input的value值 (比如 用户,密码 等。。) ===>第二步 (理解第一步的繁琐 就行代码打包)
user[props] = e.target.value
break;
}
this.setState({
user
})
}
send() {
console.log(this.start.user);
}
render() {
return (
<div className='from'>
{/* 最初代码onChange={(e) => this.classname(e)} */}
<div> <span className='spam'> 用户:</span><input onChange={(e) => this.classuser(e, 'name')} type="text" /></div>
{/* 最初代码onChange={(e) => this.classpass(e)} */}
<div> <span className='spam'>密码:</span><input type="password" onChange={(e) => this.classuser(e, 'pass')} /></div>
<div>
{/* 在性别要特别注意 name要赋值 (比如:name="sex") */}
{/* 如果性别要默认选择 (前提this.start.user.sex有值 sex: 'man',) 加checked={this.state.user.sex == 'man'} */}
<span className='spam'>性别:</span><input type="checkbox" name="sex" value='man' id="" onChange={(e) => this.classuser(e, 'sex')} />男
<input type="checkbox" value='woman' name="sex" id="" onChange={(e) => this.classuser(e, 'sex')} />女
</div>
<div><span className='spam'>爱好:</span>{this.aihao.map((item, index) => {
return (
<span key={item.name}>
{/* checked={this.start.user.habby.some(i=>i==item.value)} 是 当查看的状态下 从服务器(this.start.user.hobby 中有值的情况下)赋给CheckBox值是 */}
<input type="checkbox" checked={this.start.user.habby.some(i => i == item.value)} name="" id=""
onChange={(e) => this.classuser(e, 'habby', index)} />{item.name}</span>
)
})}</div>
<div>
<span className='spam'>工作:</span><select name="" id="" onChange={(e) => this.classuser(e, 'job')}>
<option value="">--请选择--</option>
<option value="web">web前端</option>
<option value="java">java</option>
<option value="php">PHP</option>
</select>
</div>
<div>
<span className='spam'>留言:</span><textarea name="" id="" cols="30" rows="10" onChange={(e) => this.classuser(e, 'des')}></textarea>
</div>
<div>
<input type="checkbox" name="" id="" onChange={(e) => this.classuser(e, 'isAgree')} />请同意
</div>
<div> <button onClick={() => this.send()}>提交</button></div>
</div>
)
}
}
export default Parent
提交后台表单数据