React---组件实例三大核心属性（三）refs与事件处理

一、refs

1. 理解

组件内的标签可以定义ref属性来标识自己

2. 编码

1. 字符串形式的ref　　　

　　　　<input ref="input1"/>

　　　　获取值：const { input1 } = this.refs; console.log（input.value）

 　　 2. 回调形式的ref

　　　　<input ref={(c)=>{this.input1 = c}}

　　　　获取值：const { input1 } = this;  console.log（input.value）

　　  3. createRef创建ref容器

　　　　React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的

　　　　myRef = React.createRef() 

　　　　<input ref={this.myRef}/>

　　　　获取值：console.log(this.myRef.current.value)

二、事件处理

1. 通过onXxx属性指定事件处理函数(注意大小写，比如onClick)

　　　　1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件(更好的兼容性)

　　　　2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)（高效）

　　 2. 通过event.target得到发生事件的DOM元素对象（不要过度使用ref）

 三、收集表单数据

　　1. 受控组件

　　在HTML中，标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。

　　

<script type="text/babel">
        //创建组件
        class Login extends React.Component{
            //初始化状态
            state = {
                username:'', //用户名
                password:'' //密码
            }
            //保存用户名到状态中
            saveUsername = (event)=>{
                this.setState({username:event.target.value})
            }
            //保存密码到状态中
            savePassword = (event)=>{
                this.setState({password:event.target.value})
            }
            //表单提交的回调
            handleSubmit = (event)=>{
                event.preventDefault() //阻止表单提交
                const {username,password} = this.state
                alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
            }

            render(){
                return(
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.saveUsername} type="text" name="username"/>
                        密码：<input onChange={this.savePassword} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        //渲染组件
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>

　　2. 非受控组件

　　表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）

<script type="text/babel">
        //创建组件
        class Login extends React.Component{
            handleSubmit = (event)=>{
                event.preventDefault() //阻止表单提交
                const {username,password} = this
                alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
            }
            render(){
                return(
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input ref={c => this.username = c} type="text" name="username"/>
                        密码：<input ref={c => this.password = c} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        //渲染组件
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>