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

一、refs

1.理解

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

2.编码

1. 字符串形式的ref　　　

　　　　<inputref="input1"/>

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

　　 2. 回调形式的ref

　　　　<inputref={(c)=>{this.input1=c}}

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

　　 3. createRef创建ref容器

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

　　　　myRef=React.createRef()

　　　　<inputref={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控制的输入表单元素而改变其值的方式，称为：“受控组件”。

 1 <script type="text/babel">
 2         //创建组件
 3         class Login extends React.Component{
 4             //初始化状态
 5             state = {
 6                 username:'', //用户名
 7                 password:'' //密码
 8             }
 9             //保存用户名到状态中
10             saveUsername = (event)=>{
11                 this.setState({username:event.target.value})
12             }
13             //保存密码到状态中
14             savePassword = (event)=>{
15                 this.setState({password:event.target.value})
16             }
17             //表单提交的回调
18             handleSubmit = (event)=>{
19                 event.preventDefault() //阻止表单提交
20                 const {username,password} = this.state
21                 alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
22             }
23 
24             render(){
25                 return(
26                     <form onSubmit={this.handleSubmit}>
27                         用户名：<input onChange={this.saveUsername} type="text" name="username"/>
28                         密码：<input onChange={this.savePassword} type="password" name="password"/>
29                         <button>登录</button>
30                     </form>
31                 )
32             }
33         }
34         //渲染组件
35         ReactDOM.render(<Login/>,document.getElementById('test'))
36     </script>

　　2. 非受控组件

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

 1 <script type="text/babel">
 2         //创建组件
 3         class Login extends React.Component{
 4             handleSubmit = (event)=>{
 5                 event.preventDefault() //阻止表单提交
 6                 const {username,password} = this
 7                 alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
 8             }
 9             render(){
10                 return(
11                     <form onSubmit={this.handleSubmit}>
12                         用户名：<input ref={c => this.username = c} type="text" name="username"/>
13                         密码：<input ref={c => this.password = c} type="password" name="password"/>
14                         <button>登录</button>
15                     </form>
16                 )
17             }
18         }
19         //渲染组件
20         ReactDOM.render(<Login/>,document.getElementById('test'))
21     </script>