1.refs
组件内的标签可以定义ref属性来标识自己
每个标签都可以定义自己的ref属性，然后最后是refs的一个对象包含这些ref
有了ref，就可以不用使用document.getElementById去获取DOM了
目前有两种写ref的方式，一种是回调形式写，一种是createRef方式写
2.回调式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<body>
<!--准备一个容器-->
<div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
// 创建组件
class Demo extends React.Component{
// 展示左侧输入框的数据
showData = ()=>{
let {input1} = this;
console.log(this)
alert(input1.value)
}
showData2 = ()=>{
let {input2} = this;
alert(input2.value)
}
render(){
return(
<div>
<input ref={currentNode => this.input1 = currentNode} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>按钮</button>
<input onBlur={this.showData2} ref={currentNode => this.input2 = currentNode} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo a="1"/>,document.getElementById('test'))
</script>
</html>
这种回调式定义ref有一个问题，就是他在组件更新的时候会被调用两次，解决的方法就是把匿名函数改成命名函数
3.createRef方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<body>
<!--准备一个容器-->
<div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
// 创建组件
class Demo extends React.Component{
// 创建 ref 对象 React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
input1Ref = React.createRef();
input2Ref = React.createRef();
// 展示左侧输入框的数据
showData = ()=>{
alert(this.input1Ref.current.value);
}
showData2 = ()=>{
alert(this.input2Ref.current.value);
}
render(){
return(
<div>
<input ref={this.input1Ref} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>按钮</button>
<input onBlur={this.showData2} ref={this.input2Ref} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo a="1"/>,document.getElementById('test'));
</script>
</html>
- 这个需要注意的就是每个容器只可以存储一个ref，会覆盖，所以每个ref都要创建对象
