一. 非受控組件，現(xiàn)用現(xiàn)?。ㄋ斜韱沃休斎肟?，選擇框的值）
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"))二. 受控組件: 隨著值的改變，自動(dòng)存儲(chǔ)到state中，需要用時(shí)，直接到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"))