React事件及ref引用

事件

采用on+事件名的方式来绑定一个事件

React的事件并不是原生事件，而是合成事件

React并不会真正的绑定事件到每一个具体的元素，而是采用事件代理的模式

事件的绑定

<button onClick={ ()=>{} }>add1</button>  // 直接将逻辑写在行内 逻辑多时不推荐
<button onClick={ this.handleClick2.bind(this) }></button> // 通过bind将this指向绑定到实例
<button onClick={ this.handleClick3 }></button>	// handleClick函数使用箭头函数
<button onClick={ ()=>{				// 外面嵌套一层箭头函数 使this为上下文的实例，同时便于传参
	this.handleClick4()											
} }></button>

事件对象

函数中的第一个形参为事件对象

handleClick = (e) => {
	// e为事件对象 函数需要传参时参数从第二个开始
}

ref引用

传统ref引用

给标签设置 ref属性

通过这个获取this.refs，ref可以获取到应用的真实dom

给组件设置ref

通过这个获取this.refs，ref可以获取到组件对象

传统写法即将弃用 在React组件的严格模式下会报错

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
	,document.getElementById("app"))

ref新的引用

myRef = React.createRef()
<div ref={this.myRef}>hello</div>
// 通过this.myRef获取到的为一个对象 其中包含current属性 值为获取到的dom结构

forwardRef高阶组件

通过forwardRef可以在子组件向父组件传递引用

只能传递一个 当需要传递多个仍需要子向父传值传递多次

import React, { Component, forwardRef } from 'react'

const Test1 = forwardRef((props, ref) => {
  return (
    <div>
      <input type="text" ref={ref} />
    </div>
  )
})

export default class Test extends Component {
  mytext = React.createRef()
  render () {
    return (
      <>
        <Test1 ref={this.mytext}></Test1>
        <button onClick={() => {
          console.log(this.mytext)
        }}>get</button>
      </>
    )
  }
}