React中ref的使用

最新推荐文章于 2023-12-06 11:23:25 发布

新城大海

最新推荐文章于 2023-12-06 11:23:25 发布

阅读量211

点赞数

文章标签： react.js

本文链接：https://blog.csdn.net/weixin_45664217/article/details/120209360

版权

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>

新城大海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React中ref的使用

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-Comp.
复制链接

扫一扫