1. refs属性与事件处理

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

1) 形式

1. 字符串形式的ref

ref="input1"

<script type="text/babel">
   // 1、创建组件
   class Demo extends React.Component{
     //展示左侧输入框的数据
     showData = ()=>{
       const { input1 } = this.refs
       alert(input1.value)
     }
     //展示右侧输入框的数据
     showData2 = ()=>{
       const { input2 } = this.refs
       alert(input2.value)
     }
     render() {
       return (
         <div>
           <input ref="input1" type="text" placeholder="点击按钮提示数据"/> 
           <button onClick={this.showData}>点我提示左侧的数据</button> 
           <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
         </div>
       );
     }
   }
   ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>

2. 回调形式的ref

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

<script type="text/babel">
   // 1、创建组件
   class Demo extends React.Component{
     //获取ref
     inputFun = (c) =>{
     	this.input1 = c
     }

     //展示左侧输入框的数据
     showData = ()=>{
       const { input1 } = this
       alert(input1.value)
     }
     //展示右侧输入框的数据
     showData2 = ()=>{
       const { input2 } = this
       alert(input2.value)
     }
     render() {
       return (
         <div>
           { /*原始函数形式*/}
           <input ref={this.inputFun} type="text" placeholder="点击按钮提示数据"/> 
           <button onClick={this.showData}>点我提示左侧的数据</button> 
           { /*函数简写形式*/}
           <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
         </div>
       );
     }
   }
   ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>

3. createRef创建ref容器·

myRef = React.createRef()

<input ref={this.myRef}/>

<script type="text/babel">
   // 1、创建组件
   class Demo extends React.Component{
     //React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
     myRef = React.createRef()
     myRef2 = React.createRef()

     //展示左侧输入框的数据
     showData = ()=>{
       console.log(this)
       const { myRef } = this
       alert(myRef.current.value)
     }
     //展示右侧输入框的数据
     showData2 = ()=>{
       const { myRef2 } = this
       alert(myRef2.current.value)
     }
     render() {
       return (
         <div>
           <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/> 
           <button onClick={this.showData}>点我提示左侧的数据</button> 
           <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
         </div>
       );
     }
   }
   ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>

2) 事件处理

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

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

b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)———为了高效

2. 通过event.target得到发生事件的DOM元素对象。发生事件的元素就是操作的元素则可以省略ref。

3. 不要过度使用ref。

A. 非受控组件

用ref实现，页面中所有的输入类DOM现用现取，即通过ref标识DOM，进而获取数据

<script type="text/babel">
   class Demo extends React.Component{
     //表单提交函数
     handleSubmit = (event)=>{
       //阻止表单的默认提交
       event.preventDefault()
       //通过ref获取表单数据
       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(<Demo/>, document.getElementById('test'))
</script>

知识点：

1、表单<form>中都有onSubmit属性来控制提交之后的状态

2、 输入DOM（如<input>）得有name属性才能通过GET请求获取到query参数（用？携带）

3、删掉action无法阻止表单页面刷新以及地址栏更新，得要禁止默认事件event.preventDefault()

4、<button>的默认type属性值就是submit

B. 受控组件

1、用onChange+state实现，页面中所有的输入类DOM将数据存在state中

2、更推荐用受控组件，减少ref的使用

<script type="text/babel">
   class Demo 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()
       //通过ref获取表单数据
       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(<Demo/>, document.getElementById('test'))
</script>

2. 高阶函数

? 如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

1、若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。

2、若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。

3、常见的高阶函数有：Promise、setTimeout、arr.map()等等

? 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

柯里化实现受控组件

<!--用函数柯里化修改受控组件-->
<script type="text/babel">
   class Demo extends React.Component{
     state ={
       username:'',
       password:''
     }

     //保存用户名到状态中
     saveFormData = (type)=>{
       return (event) =>{
       	this.setState({[type]:event.target.value})
       }
     }

     //表单提交函数
     handleSubmit = (event)=>{
       //阻止表单的默认提交
       event.preventDefault()
       //通过ref获取表单数据
       const {username, password } = this.state
       alert(`用户名是：${username}, 密码是：${password}`)
     }
     render() {
       return (
         <form onSubmit={this.handleSubmit}>
           用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
           密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
           <button>登录</button>
         </form>
       );
     }
   }
   ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>

1、this.saveFormData('username')，有了小括号，立即调用，但是返回的还是一个函数，符合回调函数的要求

2、[dataType]：调用变量形式的对象属性名

3、event形参不需要实参，可以直接调用，所以event不能写进this.saveFormData

('username')的参数中，得用柯里化形式来体现

不用函数柯里化的实现方式

<script type="text/babel">
   class Demo extends React.Component{
     state ={
       username:'',
       password:''
     }

     //保存用户名到状态中
     saveFormData = (type, event)=>{
     	this.setState({[type]:event.target.value})
     }

     //表单提交函数
     handleSubmit = (event)=>{
       //阻止表单的默认提交
       event.preventDefault()
       //通过ref获取表单数据
       const {username, password } = this.state
       alert(`用户名是：${username}, 密码是：${password}`)
     }
     render() {
       return (
         <form onSubmit={this.handleSubmit}>
           用户名：<input onChange={event => this.saveFormData('username',event)} type="text" name="username"/>
           密码：<input onChange={event => this.saveFormData('password', event)} type="password" name="password"/>
           <button>登录</button>
         </form>
       );
     }
   }
   ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>

结语：

　努力了这么久，但凡有点儿天赋，也该有些成功的迹象了

回复react笔记，可以获得全套笔记

react高质量笔记_6(组件三大核心属性之props)

react高质量笔记_5(组件三大核心属性之state)