class App extends React.Component{
constructor(){
super();
this.state = {
username:"username",
password:"password",
isAgree:false,
hobbies:[
{value:"sing",text:"唱",isChecked:false},
{value:"swimming",text:"游泳",isChecked:false},
{value:"run",text:"跑步",isChecked:false}
],
fruit:"apple",
vegetable:[
{value:"tomato",text:"西红柿"},
{value:"potato",text:"土豆"},
{value:"spinach",text:"菠菜"}
],
vege:[]
}
}
handleSubmitClick(event){
event.preventDefault()
}
handleInputChange(event){
this.setState({
[event.target.name]:event.target.value
})
}
handleAgreeChange(event){
console.log(event.target.checked);
this.setState({isAgree:event.target.checked})
}
handleHobbyChange(event,index){
const hobby = [...this.state.hobbies]
hobby[index].isChecked = event.target.checked
// console.log(index);
this.setState({hobbies:hobby})
}
SelectFruit(event){
// console.log(event.target.value);
this.setState({
fruit:event.target.value
})
}
SelectVegetable(event){
// console.log(event.target.selectedOptions); //类数组
// const options = Array.from(event.target.selectedOptions) //Array from ("可迭代对象那个","参数2")
// const v = options.map(item=>{
// return item.value
// })
const v = Array.from(event.target.selectedOptions,item=>{ return item.value})
// console.log(v);
this.setState({
vege:v
})
}
CatchMessage(){
console.log("用户名:",this.state.username,"密码:",this.state.password);
console.log("爱好:");
const hoo = this.state.hobbies.filter(item=>item.isChecked).map(e=>{ return e.text})
console.log(hoo);
console.log("喜欢的水果:",this.state.fruit);
console.log("你喜欢的蔬菜:",this.state.vege);
}
render(){
const {username,password,isAgree,hobbies,fruit,vegetable} = this.state
return(
<div>
<form onSubmit = {e=>this.handleSubmitClick(e)}> {/* action ="/abc" 默认提交*/}
<label htmlFor="username">用户名:{username}
<input type="text" id = {username} name = "username" value = {username} onChange = {e=>this.handleInputChange(e)}/>
</label>
<label htmlFor="password">密码:{password}
<input type="text" id = {password} name = "password" value = {password} onChange = {e=>this.handleInputChange(e)}/>
</label>
<div>
<label htmlFor = "agree">
{/*<input type="checkbox" id = "agree" />同意协议{/* 非受控组件htmlFor id 可以实现点文字勾选 */}
<input type="checkbox" id = "agree" checked = {isAgree} onChange={e=>this.handleAgreeChange(e)}/>同意协议
</label>
</div>
<div>
<p>你的爱好:</p>
{
hobbies.map((item,index)=>{
return (<label htmlFor = {item.value}>
<input type="checkbox" id = {item.value} checked = {item.isChecked} onChange ={e=>this.handleHobbyChange(e,index)}/>{item.text}
</label>)
})
}
</div>
<select value={fruit} onChange={e=>this.SelectFruit(e)}>
<option value="orange">橘子</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</select>
<br/>
<div>
</div>
<select value={vegetable} onChange={(e)=>this.SelectVegetable(e)} multiple>
{
vegetable.map((item,index) =>{
return <option value={item.value} >{item.text}</option>
})
}
</select>
<br/>
<button onClick = {e=>this.CatchMessage()}>注册</button>
</form>
</div>
)
}
}
//------受控组件和非受控组件
import React, { PureComponent } from 'react'
export default class App extends PureComponent {
constructor(){
super()
this.state ={
text:"username"
}
}
inputText(event){
// console.log(event.target.value);
this.setState({
text:event.target.value
})
}
render() {
const {text} = this.state
return (
<div>
{/* 受控组件 value */}
<input type="text" value={text} onChange={e=>this.inputText(e)}/>
<p>username:{text}</p>
<br />
{/* 非受控组件 */}
<p>password:<input type="text" /></p>
</div>
)
}
}