一. 非受控组件，现用现取（所有表单中输入框，选择框的值）
class Hello extends React.Component{
submitHandle=()=>{
let names = this.names.value;
let sex = this.sex.value;
let blood = this.blood.value;
let introduction = this.introduction.value;
let hobby = this.state.hobby.join(',')
console.log(names + sex + blood + introduction + hobby);
}
state = {
sex:'男',
hobby:[],
}
changeSex=(event)=>{
console.log(event.target);
this.setState({sex:event.target.value})
}
changeHobby=(event)=>{
const {checked,value} = event.target;
this.setState(state=>{
let hobby = state.hobby;
if(checked){
hobby.push(value)
}
else{
hobby = hobby.filter(item=>item != value)
}
return {hobby}
})
}
render(){
const {sex,hobby} = this.state
return (
<div>
<h1>表单信息收集</h1>
<div>
<form action="">
<li>姓名:
<input type="text" ref={c=>this.names=c}/>
</li>
<li>性别:
<input type="radio" ref={c=>this.sex=c} value='男' onChange={this.changeSex} checked={sex=='男'}/>男
<input type="radio" ref={c=>this.sex=c} value='女' onChange={this.changeSex} checked={sex=='女'} />女
{/*表单的checked, value属性值必须与onChange一起使用，否则就写死了，不能修改了
可用defaultChecked/defaultValue来代替(仅在第一次起作用, 以后就没有用了)*/}
</li>
<li>血型：
<select ref={c=>this.blood=c}>
<option value="A">A型</option>
<option value="AB">AB型</option>
<option value="O">O型</option>
<option value="B">B型</option>
</select>
</li>
<li>爱好:
<input type="checkbox" value='唱歌' checked={hobby.includes('唱歌')?true:false} onChange={this.changeHobby}/>唱歌
<input type="checkbox" value='跳舞' checked={hobby.includes('跳舞')?true:false} onChange={this.changeHobby}/>跳舞
<input type="checkbox" value='看书' checked={hobby.includes('看书')?true:false} onChange={this.changeHobby}/>看书
<input type="checkbox" value='睡觉' checked={hobby.includes('睡觉')?true:false} onChange={this.changeHobby}/>睡觉
</li>
<li>介绍：
<textarea ref={c=>this.introduction=c} ></textarea>
</li>
<li>
<button onClick={this.submitHandle} type='button'>表单提交</button>
</li>
</form>
</div>
</div>
)
}
}
ReactDOM.render(<Hello/>, document.getElementById("test"))二. 受控组件: 随着值的改变，自动存储到state中，需要用时，直接到this.state中取
class Hello extends React.Component{
submitHandle=()=>{
const {names,sex,blood,introduction,hobby} = this.state
console.log(names + sex + blood + introduction + hobby);
}
state = {
names:'',
sex:'男',
blood:'',
introduction:'',
hobby:[],
}
changeSex=(event)=>{
console.log(event.target);
this.setState({sex:event.target.value})
}
changeHobby=(event)=>{
const {checked,value} = event.target;
this.setState(state=>{
let hobby = state.hobby;
if(checked){
hobby.push(value)
}
else{
hobby = hobby.filter(item=>item != value)
}
return {hobby}
})
}
changeForm = (e)=>{
let input = e.target
this.setState({
[input.name]:input.value
})
}
render(){
const {names,sex,blood,hobby,introduction} = this.state
return (
<div>
<h1>表单信息收集</h1>
<div>
<form action="">
<li>姓名:
<input type="text" name='names' onBlur={this.changeForm}/>
</li>
<li>性别:
<input type="radio" name='sex' value='男' onChange={this.changeForm} checked={sex=='男'}/>男
<input type="radio" name='sex' value='女' onChange={this.changeForm} checked={sex=='女'} />女
{/*表单的checked, value属性值必须与onChange一起使用，否则就写死了，不能修改了
可用defaultChecked/defaultValue来代替(仅在第一次起作用, 以后就没有用了)*/}
</li>
<li>血型：
<select onChange={this.changeForm}>
<option value="A">A型</option>
<option value="AB">AB型</option>
<option value="O">O型</option>
<option value="B">B型</option>
</select>
</li>
<li>爱好:
<input type="checkbox" value='唱歌' checked={hobby.includes('唱歌')?true:false} onChange={this.changeHobby}/>唱歌
<input type="checkbox" value='跳舞' checked={hobby.includes('跳舞')?true:false} onChange={this.changeHobby}/>跳舞
<input type="checkbox" value='看书' checked={hobby.includes('看书')?true:false} onChange={this.changeHobby}/>看书
<input type="checkbox" value='睡觉' checked={hobby.includes('睡觉')?true:false} onChange={this.changeHobby}/>睡觉
</li>
<li>介绍：
<textarea name='introduction' onBlur={this.changeForm}></textarea>
</li>
<li>
<button onClick={this.submitHandle} type='button'>表单提交</button>
</li>
</form>
</div>
</div>
)
}
}
ReactDOM.render(<Hello/>, document.getElementById("test"))