React之组件实例的三大属性之rel
Posted Icy Hunter
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React之组件实例的三大属性之rel相关的知识，希望对你有一定的参考价值。
文章目录
ref
组件内的标签可以定义属性来标识定义自己，有三种方式来进行定义。下面通过一个实例分别介绍
实例
做两个输入框，左边点击按钮有弹窗，右边输出后点击别处页面会有弹窗。
字符串形式
这种形式十分方便，操作起来速度快，但是react不推荐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component
showData = () =>
const input1 = this.refs
alert(this.refs.input1.value)
alert(input1.value + "aaa")
showData2 = () =>
const input2 = this.refs
alert(input2.value)
render()
return (
<div>
<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>
运行结果：
左侧输入后点击按钮出弹窗
右侧输入后点击其他处出弹窗
回调函数形式
这种方法也比较方便，比字符形式好点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component
showData = () =>
const input1 = this
alert(input1.value)
showData2 = () =>
const input2 = this
alert(input2.value)
//内联函数的写法和类绑定函数的写法没什么区别的
render()
return (
<div>
<input ref=c => this.input1 = c type="text" placeholder="点击按钮提示数据"/>
<button onClick=this.showData>点我提示左侧的数据</button>
<input onBlur=this.showData2 ref=c => this.input2 = c type="text" placeholder="失去焦点提示数据"/>
</div>
)
ReactDOM.render(<Demo/>, document.getElementById("test"))
</script>
</body>
</html>
输出结果和上面一样
createRef
这种方式好像比较麻烦，但是react推荐这种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component
// React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
myRef = React.createRef()
myRef2 = React.createRef()
showData = () =>
alert(this.myRef.current.value)
showData2 = () =>
alert(this.myRef2.current.value)
//内联函数的写法和类绑定函数的写法没什么区别的
render()
return (
<div>
<input ref=this.myRef type="text" placeholder="点击按钮提示数据"/>
<button onClick=this.showData>点我提示左侧的数据</button>
<input onBlur=this.showData2 ref=this.myRef2 type="text" placeholder="失去焦点提示数据"/>
</div>
)
ReactDOM.render(<Demo/>, document.getElementById("test"))
</script>
</body>
</html>
输出结果和上面一样
以上是关于React之组件实例的三大属性之rel的主要内容，如果未能解决你的问题，请参考以下文章