文章目录

• 1、字符串形式的ref（过时/不推荐）
• 2、回调形式的ref（推荐！！！）
• • ● 回调ref中回调次数的问题
• 3、createRef创建ref容器（最新最推荐）
• 4、事件处理

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

编码：

1. 字符串形式的ref：
2. 回调形式的ref：{this.input1 = c}}/>
3. createRef创建ref容器：myRef= React.createRef();

1、字符串形式的ref（过时/不推荐）

2、回调形式的ref（推荐！！！）

{this.input1 = c}}/>

//创建组件
class Demo extends React.Component {render() {return (
c => this.input1 = c} type="text" placeholder="点击按钮提示数据"/> ()=>alert(this.input1.value)}>点我提示左侧的数据 c => this.input2 = c} onBlur={()=>alert(this.input2.value)} type="text" placeholder="失去焦点提示数据" /> 
)}
}
//渲染组件到页面
ReactDOM.render(, document.getElementById('test'))

● 回调ref中回调次数的问题

如果 ref 回调函数是以内联函数（ ref={c => this.input1 = c} ）的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

CODE：

class Demo extends React.Component{state = {isHot:false}showInfo = ()=>{const {input1} = thisalert(input1.value)}changeWeather = ()=>{//获取原来的状态const {isHot} = this.state//更新状态this.setState({isHot:!isHot})}saveInput = (c)=>{this.input1 = c;console.log('@',c);}render(){const {isHot} = this.statereturn(
今天天气很{isHot ? '炎热':'凉爽'}
(c)=>{this.input1 = c;console.log('@',c);}} type="text"/>

{/* class 的绑定函数的方式避免二次回调 */}{/*

*/}this.showInfo}>点我提示输入的数据this.changeWeather}>点我切换天气
)}
}
//渲染组件到页面
ReactDOM.render(,document.getElementById('test'))

Result：

3、createRef创建ref容器（最新最推荐）

React.createRef 调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的

myRef= React.createRef();

class Demo extends React.Component {/* React.createRef 调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的 */myRef = React.createRef()myRef2 = React.createRef()render() {return (
this.myRef} type="text" placeholder="点击按钮提示数据" /> ()=>alert(this.myRef.current.value);}>点我提示左侧的数据 ()=>alert(this.myRef2.current.value)} ref={this.myRef2} type="text" placeholder="失去焦点提示数据" /> 
)}
}
//渲染组件到页面
ReactDOM.render(, document.getElementById('test'))

4、事件处理

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

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

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

2. 通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref

小白学习参考视频：尚硅谷React教程

中文官网：Refs and the DOM