class FromSimple extends Component {
constructor(props){
super(props);
this.state={
username:'莱昂纳多',
password:'',
selectedArr:[
]
}
}
handleUserName=(e)=>{
this.setState({
username:e.target.value
})
}
handlePassword=(e)=>{
this.setState({
password:e.target.value
})
}
handleSubmit=(e)=>{
//阻止默认事件
e.preventDefault();
if(this.state.username && this.state.password && this.state.selectedArr && this.state.selectedArr.length>0){
let arr = this.state.selectedArr.map(n=>(`${n}`))
//发送ajax请求
alert(`当前用户名：${this.state.username},密码：${this.state.password},爱好：${arr}`)
}
}
handleSelectedChange=(e)=>{
let newArr = [...this.state.selectedArr];
newArr.push(e.target.value);
this.setState({
selectedArr:newArr
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit} value={this.state.selectedArr} onChange={this.handleSelectedChange}>
<p className='username'>
<label htmlFor="name">用户名：</label>
<input type="text" value={this.state.username} onChange={this.handleUserName} id='name'/>
</p>
<p className="password">
<label htmlFor="password">密码：</label>
<input type="password" value={this.state.password} onChange={this.handlePassword} id='pwd'/>
</p>
我的爱好:
{/* <select multiple={true} value={this.state.selectedArr} onChange={this.handleSelectedChange}>
<option value="smoking">抽烟</option>
<option value="drink">喝酒</option>
<option value="perm">烫头</option>
</select> */}
<label><input type='checkbox' value="smoking">抽烟</input></label>
<label><input type='checkbox' value="drink">喝酒</input></label>
<label><input type='checkbox' value="perm">烫头</input></label>
<br/>
<input type="submit" value='登陆'/>
</form>
</div>
);
}
}
export default FromSimple;
这个是错误的文章，以后再改吧。
