有关 React ref 的知识
Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。介绍有关ref的三种形式。
详细信息请看官方文档
1 字符串形式的ref（它已过时并可能会在未来的版本被移除。）
<!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>字符串ref</title>
<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>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
class Demo extends React.Component{
showData=()=>{
alert(this.refs.input1.value) //此处拿到的是真正的节点input
}
showData2=()=>{
alert(this.refs.input2.value) //此处拿到的是真正的节点input
}
render(){
return (
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点击提示左侧数据</button>
<input onBlur={this.showData2} ref="input2" type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//ref类似于id，能够表示标签
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>2 回调函数形式的ref
<!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>回调形式ref</title>
<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>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
class Demo extends React.Component{
showData=()=>{
alert(this.input1.value)
}
showData2=()=>{
alert(this.input2.value)
}
//此方法不会频繁调用ref
saveInput=(c)=>{
this.input1=c
console.log('@'+c)
}
render(){
return (
<div>
{/*<input ref={(current)=>{this.input1 = current}} type="text" placeholder="点击按钮提示数据"/>*/}
<input ref={this.saveInput} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点击提示左侧数据</button>
<input onBlur={this.showData2} ref={(current)=>{this.input2 = current}} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//ref类似于id，能够表示标签
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>3 createRef
<!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>createRef</title>
<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>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
class Demo extends React.Component{
//React.createRef调用后可以返回一个容器，该容器可以存储被refs标识的节点，该容器专人专用，只能够存储一个
myref=React.createRef()
myref2=React.createRef()
showData=()=>{
console.log(this.myref.current.value)
alert(this.myref)
}
showData2=()=>{
alert(this.myref2.current.value)
}
//此方法不会频繁调用resf
saveInput=(c)=>{
this.input1=c
console.log('@'+c)
}
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>
)
}
}
//ref类似于id，能够表示标签
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>- 本文作者： étoile
- 版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
