React组件三大核心属性(三)——refs

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

---

实例

需求：自定义组件，功能说明如下：

1. 点击按钮，提示第一个输入框中的值。
2. 当第 2 个输入框失去焦点时，提示这个输入框中的值。

---

常规做法

我们在使用常规 JS 时，如果想获得 DOM 对象，我们会给 html 标签加上 id，并使用 getElementById 来获取 DOM 对象。

//展示左侧输入框的数据
showData = ()=>{         
                const input1 = document.getElementById('input1')
                alert(input1.value)
            }
//展示右侧输入框的数据
showData2 = ()=>{
                const input2 = document.getElementById('input2')
                alert(input2.value)
            }
render(){
                return (
                    <div>
                        <input id="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input id="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/> 
                    </div>
               )
            }

---

使用 refs

在 React 中，封装了 refs 来完成获取 DOM 对象的功能。有如下三种方式：

• 字符串
• 回调函数
• createRef()

字符串形式

这种形式虽然很方便，但是使用次数多的话会有效率问题，所以 React 官方不建议使用，今后也有被弃用的可能。

//展示左侧输入框的数据
showData = ()=>{         
                const input1 = this.refs.input1
                alert(input1.value)
            }
//展示右侧输入框的数据
showData2 = ()=>{
                const input2 = this.refs.input2
                alert(input2.value)
            }
render(){
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/> 
                    </div>
               )
            }

回调函数

回调函数是使用比较多的方式。下面为内联函数的形式。

//展示左侧输入框的数据
showData = ()=>{         
                const input1 = this.input1
                alert(input1.value)
            }
//展示右侧输入框的数据
showData2 = ()=>{
                const input2 = this.input2
                alert(input2.value)
            }
render(){
                return (
                    <div>
                        <input ref={c => {this.input1 = c;}} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref={c => {this.input2 = c;}} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/> 
                    </div>
               )
            }

当然也可以写成类内函数的形式。

//展示左侧输入框的数据
showData = ()=>{         
                const input1 = this.input1
                alert(input1.value)
            }
//展示右侧输入框的数据
showData2 = ()=>{
                const input2 = this.input2
                alert(input2.value)
            }
getinput1 = (c) => {this.input1 = c}
getinput2 = (c) => {this.input2 = c}
render(){
                return (
                    <div>
                        <input ref={this.getinput1} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref={this.getinput2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/> 
                    </div>
               )
            }

createRef()

这是 React 官方推荐使用的方式，但是每个 createRef() 只能对应一个 DOM 对象，所以如果需要多个 DOM 对象，则需要创建多个 createRef()。

//展示左侧输入框的数据
showData = ()=>{         
                const input1 = this.myRef.current
                alert(input1.value)
            }
//展示右侧输入框的数据
showData2 = ()=>{
                const input2 = this.myRef2.current
                alert(input2.value)
            }
// 创建ref容器
myRef = React.createRef()
myRef2 = React.createRef()
render(){
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/> 
                    </div>
               )
            }

---

事件处理

1. 通过 onXxx 属性指定事件处理函数（注意大小写）
   1）React 使用的是自定义(合成)事件，而不是使用原生的 DOM 事件 —— 考虑兼容性。
   2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) —— 为了高效。
2. 通过 event.target 得到发生事件的 DOM 元素对象。React 官方提示不要过分使用 refs，在很多情况我们可以使用 event.target 来代替 refs，比如上述实例中失去焦点提示信息的部分。

//展示右侧输入框的数据
showData2 = (event)=>{
	alert(event.target.value);
}

<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>