React中ref的三种写法

1,017 阅读1分钟

一、string类型直接绑定

<label ref='service' htmlFor='jsPang'>增加服务</label>

  • 获取dom节点方式:

console.log(this.refs.service)

二、react.CreateRef()

  1. 通过在class中使用React.createRef()方法创建一些变量

    refName = React.createRef

  2. 将这些变量绑定到标签的ref中

    <input ref={this.refName }></input>

三、函数形式

1.函数直接写

  • 参数为回调值,是dom元素

<input ref={(el) =>{this.input = el}}> </input>

2.在class中声明函数,在函数中绑定ref。使用这种方法可以将子组件暴露给父组件以使得父组件能够调用子组件的方法

img

img

img

注意: react并不推荐过度使用ref,如果能通过state做到的事情,就不应该使用 refs 在你的 app 中“让事情发生”。 过度使用ref并不符合数据驱动的思想