文章目录
- 1、字符串形式的ref（过时/不推荐）
- 2、回调形式的ref（推荐！！！）
- ● 回调ref中回调次数的问题
- 3、createRef创建ref容器（最新最推荐）
- 4、事件处理
理解：
- 组件内的标签可以定义ref属性来标识自己
编码：
- 字符串形式的ref：
<input ref="input1"/> - 回调形式的ref：
<input ref={(c)=>{this.input1 = c}}/> - createRef创建ref容器：
myRef= React.createRef(); <input ref={this.myRef}/>
1、字符串形式的ref（过时/不推荐）
<input ref="input1"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串形式的ref</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Demo extends React.Component {
//展示左侧输入框的数据
showData = () => {
const { input1 } = this.refs
alert(input1.value)
}
//展示右侧输入框的数据
showData2 = () => {
const { input2 } = this.refs
alert(input2.value)
}
render() {
return (
<div>
<!-- 字符串形式的ref -->
<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>
</body>
</html>
2、回调形式的ref（推荐！！！）
<input ref={(c)=>{this.input1 = c}}/>
//创建组件
class Demo extends React.Component {
render() {
return (
<div>
<input
ref={c => this.input1 = c}
type="text"
placeholder="点击按钮提示数据"
/>
<button onClick={()=>alert(this.input1.value)}>点我提示左侧的数据</button>
<input
ref={c => this.input2 = c}
onBlur={()=>alert(this.input2.value)}
type="text"
placeholder="失去焦点提示数据"
/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2" />, 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} = this
alert(input1.value)
}
changeWeather = ()=>{
//获取原来的状态
const {isHot} = this.state
//更新状态
this.setState({isHot:!isHot})
}
saveInput = (c)=>{
this.input1 = c;
console.log('@',c);
}
render(){
const {isHot} = this.state
return(
<div>
<h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>
{/* class 的绑定函数的方式避免二次回调 */}
{/*<input ref={this.saveInput} type="text"/><br/><br/>*/}
<button onClick={this.showInfo}>点我提示输入的数据</button>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
Result：
3、createRef创建ref容器（最新最推荐）
React.createRef 调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
myRef= React.createRef();
<input ref={this.myRef}/>
class Demo extends React.Component {
/* React.createRef 调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的 */
myRef = React.createRef()
myRef2 = React.createRef()
render() {
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
<button
onClick={()=>alert(this.myRef.current.value);}>
点我提示左侧的数据
</button>
<input
onBlur={()=>alert(this.myRef2.current.value)}
ref={this.myRef2}
type="text"
placeholder="失去焦点提示数据" />
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))
4、事件处理
-
通过onXxx属性指定事件处理函数(注意大小写)
-
React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
-
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
-
-
通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref
小白学习参考视频：尚硅谷React教程
中文官网：Refs and the DOM
