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)