初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群):757345416
直接贴代码了:
import React from 'react';
export default class Demo extends React.Component{
constructor(props){
super(props);
this.state = {
email: "",
intro: "",
city: "handan",
emailError: "",
introError: ""
}
}
handleEmail (e) {
let value = e.target.value;
let error = '';
if(!(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
error = '请输入正确的Email';
}
this.setState({
email: value,
emailError: error
});
}
handleIntro (e) {
let value = e.target.value;
let error = "";
if(value.length < 10) {
error = "介绍不能少于十个字";
}
this.setState({
intro: value,
introError: error
});
}
handleCity(e) {
let value = e.target.value;
this.setState({
city: value,
});
}
handleGender(e) {
let male = !!(e.target.value === 'MALE');
this.setState({
male: male
});
}
getData (){
console.log(this.state)
}
render () {
return (
<div>
<p>
<label htmlFor='email'>email:</label>
<input type='text' name='intro' id='intro' value={this.state.email} onChange={this.handleEmail.bind(this)}/>
<span>{this.state.emailError}</span>
</p>
<p>
<label htmlFor='intro'>intro:</label>
<textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro.bind(this)}/>
<span>{this.state.introError}</span>
</p>
<p>
<label htmlFor='city'>所在城市:</label>
<select name='city' id='city' value={this.state.city} onChange={this.handleCity.bind(this)}>
<option value='hz'>杭州</option>
<option value='bj'>北京</option>
<option value='sh'>上海</option>
</select>
</p>
<p>
<label>性别:</label>
<input type='radio' name='gender' checked={this.state.male} onChange={this.handleGender.bind(this)}
value='MALE'/>
<input type='radio' name='gender' checked={!this.state.male} onChange={this.handleGender.bind(this)}
value='FEMALE'/>
</p>
<button onClick={this.getData.bind(this)}>点击</button>
</div>
)
}
}