14_ React from表单 受控组件和非受控组件

 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>
    )
  }
}