react第三天 子传父、表单输入、ref

day20 笔记

---

一、课程回顾

• 事件（箭头函数、bind绑定）
• props(函数props、类this.props)
• state（setState）
• 组件通信之父传子

---

二、组件通信之子传父

• 子组件的内容

        const {changeOne } = this.props
        const {msg} = this.state
        return (
            <div className='box'>
                <h1>我是长子组件</h1>
                <button onClick={changeOne.bind(this,msg)}>点击修改父组件内容的事件</button>
            </div>
        )
    }

• 父组件的内容

    //组件一的修改事件
    changeMsg(m){
        console.log(m,'我是被子组件触发')
        this.setState({
            msg:m
        })
    }
    <SonOne changeOne={this.changeMsg.bind(this)}></SonOne>

---

三、表单输入

• 登录

//在jsx语法中 默认值 要用defaultValue去表示
//React中是单项数据流，如果我想要得到input输入框值的变化，那么我需要用onChange方法去实现，不能写成onchange
        this.state={
            userInfo:{
                name:'',
                pass:''
            }
        }
    //用户名的change事件
    changeName(e){
        //解构
        let {userInfo} = this.state 
        //取出input输入框的一个变化，把变化的值，赋值给变量
        userInfo.name = e.target.value 
        //重新给state中的userInfo赋值
        this.setState({
            userInfo
        })
    }
    //密码的change事件
    changePass(e){
        let {userInfo} = this.state
        userInfo.pass = e.target.value
        this.setState({
            userInfo
        })
    }
    //创建一个登录事件
    login(){
        let {userInfo} = this.state
        //调取登录接口
/*         axios({
            url:'/login',
            method:'post',
            data:userInfo
        })
        .then(res=>{})
        .catch(err=>{}) */
    }
<div className='box'>
                <h1>欢迎登录</h1>
                <div>
                    请输入用户名：<input type="text" defaultValue='' onChange={this.changeName.bind(this)}/>
                </div>
        <h1>{userInfo.name}</h1>
                <div>
                    请输入密码：<input type="text" defaultValue='' onChange={(event)=>this.changePass(event)}/>
                </div>
                <button onClick={this.login.bind(this)}>登录</button>
            </div>

• 注册（封装方法）

        this.state = {
            userInfo: { //登录和注册 入参的设置要与后端一致
                name:'',
                pass:'',
                sex:0,
                hobby:[],
                job:'web',
                email:'',
                idx:'',
                remark:'',
                isGreen:false
            }
        }
//封装的公共的函数
changeInfo(e,type){
/*     let {userInfo} = this.state 
        userInfo[type] = e.target.value
        this.setState({
            userInfo
        }) */
//利用es6语法 对上述方式进行简化
        this.setState({
            userInfo:{
                ...this.state.userInfo,//取出所有的对象属性
                [type]:e.target.value//根据不同input去重新赋值
            }
        })
}
//执行事件方法的时候，要用箭头函数，bind()这个方法它是隐式传参，除了传event还要传这个类型，实参会代替event
                <div>
                    请输入用户名：<input type="text" defaultValue= {userInfo.name} onChange={(event)=>this.changeInfo(event,'name')}/>
                </div>
                <div>
                    请输入密码：<input type="text" defaultValue={userInfo.pass} onChange={(event)=>this.changeInfo(event,'pass')}/>
                </div>

• 注册之单选框

this.state={
    userInfo:{
        sex:'0'
    }
}
                <div>
                    请选择性别：
                    <input type="radio" defaultValue='0' checked={userInfo.sex ==='0'} name='sex' onChange={(event)=>this.changeInfo(event,'sex')}/>男
                    <input type="radio" defaultValue='1' checked={userInfo.sex ==='1'} name='sex' onChange={(event)=>this.changeInfo(event,'sex')}/>女
                </div>

• 注册之下拉框

this.state={
    userInfo:{
        job:''
    }
}
                <div>
                    请选择你的工作：
                    <select defaultValue={userInfo.job} onChange={(event) => this.changeInfo(event, 'job')}>
                        <option value="" disabled>--请选择--</option>
                        <option value="aoye">专业熬夜一百年</option>
                        <option value="tuofa">专业脱发几十年</option>
                        <option value="web">大前端攻城狮</option>
                        <option value="all">全干攻城狮</option>
                    </select>
                </div>

• checkbox

this.state={
    userInfo:{
        isGree:false
    }
}
                <div>
                    {/* 当我点击checkbox的时候，实际上不是变更value,变更的是checked的类型 */}
                    请同意我家协议：<input type="checkbox" checked={userInfo.isGree} onChange={(event) => this.changeInfo(event, 'isGree')}/>
                </div>
//对onChange事件做条件判断
    changeInfo(e, type) {
        //type类型 我要进行一下判断，判断是取value 还是去checked
        let value = ''
        switch(type){
            case 'isGree':
                value = e.target.checked
                break;
            default:
                value = e.target.value
        }
        //利用es6语法 对上述方式进行简化
        this.setState({
            userInfo: {
                ...this.state.userInfo,//取出所有的对象属性
                [type]: value//根据不同input去重新赋值
            }
        })

    }

• checkbox 爱好

this.state={
    userInfo:{
        hobby:[]
    },
    //设定一下爱好的数据，用来展示
            hobbies: [//需要一个选中的状态
                {
                    name: '吃吃',
                    value: 'eat',
                    checked: false
                },
                {
                    name: '睡觉',
                    value: 'sleep',
                    checked: false
                },
                {
                    name: '玩',
                    value: 'play',
                    checked: false
                },
                {
                    name: '敲代码',
                    value: 'study',
                    checked: false
                }
            ]
}
                    {/* 循环遍历我的爱好 */}
                    {
                        hobbies.map((item, index) => {
                            return <span key={item.value}>
                                <input checked={userInfo.hobby.some(i=>i===item.value)}  type="checkbox" onChange={(event) => this.changeInfo(event, 'hobby', index)} />{item.name}
                            </span>
                        })
                    }
    changeInfo(e, type, index) {
        // console.log(e,'事件')
        // console.log(type,'type')
        /*       let {userInfo} = this.state 
              userInfo[type] = e.target.value
              this.setState({
                  userInfo
              }) */
        //  console.log(e.target.checked,'checkbox')
        //type类型 我要进行一下判断，判断是取value 还是去checked
        let value = ''
        switch (type) {
            case 'hobby':
                //首先把选中的内容获取到,确定到它的索引位置
                let { hobbies } = this.state
                // console.log(hobbies[index].checked,index,'这个值是谁')
                //对选中的状态进行取反
                hobbies[index].checked = !hobbies[index].checked
                //获取所有true的状态 利用filter方法过滤出我想要的结果（选中的状态）
                let arr = hobbies.filter(item => item.checked)
                //通过循环遍历映射 生成 之后只有value的新数组
                value = arr.map(item => item.value)
                console.log(value, '选中value数据')
                //console.log(arr,'选中之后的数据')
                break;
            case 'isGree':
                value = e.target.checked
                break;
            default:
                value = e.target.value
        }
        //利用es6语法 对上述方式进行简化
        this.setState({
            userInfo: {
                ...this.state.userInfo,//取出所有的对象属性
                [type]: value//根据不同input去重新赋值
            }
        })

    }

---

四、ref

• React中快速获取dom节点的方法ref
• 第一种方法和vue很相像

                <div>
                    请输入用户名：<input ref='nameRef' type="text"/>
                </div>
                //获取input的值
                this.refs.nameRef.value 

• 第二种方法（16版本以后才出现的 零bug,推荐这种使用放法）

constructor(){
    super()
    this.a = React.createRef()
}
<input type='text' ref={this.a} />
//取值的时候
this.a.current.内容

---