React中Ref是什么？
ref是React提供的用来操纵React组件实例或者DOM元素的接口。
ref的作用对象
ref可以作用于：
React组件的实例
- React.createRef();的使用
myRef = React.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>
</head>
<body>
<!-- 准备容器 -->
<div id="test"></div>
<!-- 引入React核心库 -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<!-- 引入React-DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<!-- 引入babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--引入Prop-types -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
constructor(props) {
super(props)
}
myRef = React.createRef()
myRef1 = React.createRef()
btnClickHandler = () => {
let { value } = this.myRef.current
console.log('value====', value)
}
btnClickHandler1 = () => {
let { value } = this.myRef1.current;
console.log("value1====", value)
}
render () {
return (
<div>
<input type="text" ref={this.myRef}/>
<button onClick={this.btnClickHandler}>点击</button>
<input type="text" ref={this.myRef1}/>
<button onClick={this.btnClickHandler1}>点击1</button>
</div>
)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>
</body>
</html>
2.React16之前的获取方式
破坏封装性的获取方式
定义一个ref回调函数
并将该函数绑定Parent Component的this
将该回调函数传递给子组件
子组件中将该函数赋给需要获取的DOM元素的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>Document</title>
</head>
<body>
<!-- 准备容器 -->
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<!-- 引入React核心库 -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<!-- 引入React-DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<!-- 引入babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--引入Prop-types -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
render () {
let { isHot } = this.state
return (
<div>
<div>今天天气{isHot ? '炎热': '凉爽'}</div>
{/* <input type="text" ref={(ele) => { this.input1 = ele}}/> */}
<input type="text" ref={ this.input1 }/>
{/* <button onClick={this.clickHandler.bind(this)}>点击</button> */}
<button onClick={this.clickHandler}>点击</button>
<button onClick={this.changeWeather}>改变天气</button>
</div>
)
}
state = {
input: null,
isHot: false
}
input1 = (ele) => {
console.log('@', ele)
this.setState({
input: ele
})
}
changeWeather = () => {
let { isHot } = this.state
this.setState({
isHot: !isHot
})
}
clickHandler = () => {
// console.log(this)
let { input } = this.state
console.log(input.value)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>
</body>
</html>
3.字符串refs的使用
let { refs1 } = this.refs;
全部的代码
<!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>
<div id="test1"></div>
<div id="test2"></div>
<!-- 引入React核心库 -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<!-- 引入React-DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<!-- 引入babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--引入Prop-types -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script type="text/babel">
class Demo extends React.Component {
changeValue = () => {
// console.log('this====', this.refs.refs1)
let { refs1 } = this.refs;
console.log(refs1.value)
// let input1 = document.getElementById('input1')
// console.log("input1====", input1);
// console.log("input1====", input1.value)
}
blur1 = () => {
console.log("this=-====", this)
}
render () {
return (
<div>
<input type="text" id="input1" ref="refs1"/>
<button onClick={this.changeValue}>点击</button>
<input type="text" id="input2" onBulr={this.blur1}/>
</div>
)
}
}
ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>
</body>
</html>
|