React中ref属性的使用

最新推荐文章于 2025-07-06 16:16:05 发布
最新推荐文章于 2025-07-06 16:16:05 发布
阅读量6.8k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： React JavaScript 文章标签： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/suwu150/article/details/72802129

1、在ref使用的过程中，需要注意的是：

0.14.8版本及以前用 this.getDOMNode() 或者 this.findDOMNode(this.refs.tip)

15.0版本后用 ReactDOM.findDOMNode(this.refs.tip);

2、我们通过代码进行对ref的学习：如下面代码：

<html>
<head>
    <meta charset="utf-8">
    <title>学习React！！</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <!--  注意下面注释掉的的方式是旧版本所使用的编译转换方式，没有注释的现在使用的-->
    <script src="bower_components/babel/browser.js"></script>
    <script type="text/babel">
      class FormApp extends React.Component {
          constructor(props) {
              super(props);
              this.handleSubmit = this.handleSubmit.bind(this);
              this.handleRadio= this.handleRadio.bind(this);
              this.handleCheck = this.handleCheck.bind(this);
              this.state = {
                  inputValue: 'input value',
                  selectValue: 'A',
                  radioValue: 'B',
                  checkValues: [],
                  textareaValue: 'some text here,,,,,'
              }
          }
          handleSubmit(e){
              e.preventDefault();
        /*    console.log(e);
              console.log(ReactDOM.findDOMNode(this.refs['goodInput']).value);
              console.log(ReactDOM.findDOMNode(this.refs['goodSelect']).value);
              console.log(ReactDOM.findDOMNode(this.refs['goodTextarea']).value);
        */
              var formData = {
                  input: ReactDOM.findDOMNode(this.refs['goodInput']).value,//this.refs.goodInput.findDOMNode().value,
                  select:ReactDOM.findDOMNode(this.refs['goodSelect']).value ,//this.refs.goodSelect.findDOMNode().value,
                  textarea:ReactDOM.findDOMNode(this.refs['goodTextarea']).value ,//this.refs.goodTextarea.findDOMNode()().value,
                  radio: this.state.radioValue,
                  check: this.state.checkValues,
              }
              console.log(formData);
          }
          handleRadio(e){
              this.setState({
                  radioValue: e.target.value,
              })
          }
          handleCheck(e){
              var checkValues = this.state.checkValues.slice();
              var newVal = e.target.value;
              var index = checkValues.indexOf(newVal);
              if( index == -1 ){
                  checkValues.push( newVal )
              }else{
                  checkValues.splice(index,1);
              }
              this.setState({
                  checkValues: checkValues,
              })
          }
          render(){
              return (
                      <form onSubmit={this.handleSubmit}>
                          <input ref="goodInput" type="text" defaultValue={this.state.inputValue }/>
                          <br/>
                          选项：
                          <select defaultValue={ this.state.selectValue } ref="goodSelect">
                              <option value="A">A</option>
                              <option value="B">B</option>
                              <option value="C">C</option>
                              <option value="D">D</option>
                              <option value="E">E</option>
                          </select>
                          <br/>
                          <p>radio button!</p>
                          <RadioButtons ref="goodRadio" handleRadio={this.handleRadio} />
                          <br />
                          <Checkboxes handleCheck={this.handleCheck} />
                          <br />
                          <textarea defaultValue={this.state.textareaValue} ref="goodTextarea"></textarea>
                          <br />
                          <button type="submit">提交</button>
                      </form>
              )
          }
      }
      class RadioButtons extends React.Component{
          saySomething(){
              alert("yo what's up man!!!");
          }
          render(){
              return (
                      <span>
            						A<input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="A"/>
            						B<input onChange={this.props.handleRadio} name="goodRadio" type="radio" defaultChecked value="B"/>
            						C<input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="C"/>
            					</span>
              )
          }
      }
      class Checkboxes extends React.Component{
          render(){
              return (
                    <span>
                        A<input onChange={this.props.handleCheck}  name="goodCheckbox" type="checkbox" value="A"/>
                        B<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B" />
                        C<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="C" />
		                </span>
              )
          }

      }

		var formApp = ReactDOM.render(
			<FormApp />,
			document.getElementById('app')
		)
	</script>
</body>
</html>

在上面代码中，我们通过下面这段代码进行值得获取，使用的主要方法有findDOMNode()，其中this.refs['goodInput']中的goodInput为标签的name

              var formData = {
                  input: ReactDOM.findDOMNode(this.refs['goodInput']).value,//this.refs.goodInput.findDOMNode().value,
                  select:ReactDOM.findDOMNode(this.refs['goodSelect']).value ,//this.refs.goodSelect.findDOMNode().value,
                  textarea:ReactDOM.findDOMNode(this.refs['goodTextarea']).value ,//this.refs.goodTextarea.findDOMNode()().value,
                  radio: this.state.radioValue,
                  check: this.state.checkValues,
              }

为了能够使用上面的代码，我们进行了如下修改，在原来的代码中加入ref标签

代码如下所示：

<input ref="goodInput" type="text" defaultValue={this.state.inputValue }/>

当我们获取值的时候，就可以通过name进行获取到

在最新的版本中(修改为2017年12月份),React官方已经开始不建议这样使用,而是采用下面的方式使用,如下面代码:

<input ref={instance => this.instance = instance} type="text" defaultValue={this.state.inputValue }/>

在获取值得时候,能够通过 this.instance进行获取,如下面的使用实例

<html>
<head>
    <meta charset="utf-8">
    <title>学习React！！</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <!--  注意下面注释掉的的方式是旧版本所使用的编译转换方式，没有注释的现在使用的-->
    <script src="bower_components/babel/browser.js"></script>
    <script type="text/babel">
      class FormApp extends React.Component {
          constructor(props) {
              super(props);
              this.handleSubmit = this.handleSubmit.bind(this);
              this.state = {
                  inputValue: 'input value',
                  selectValue: 'A',
                  textareaValue: 'some text here,,,,,'
              }
          }
          handleSubmit(e){
              e.preventDefault();
              var formData = {
                  input: ReactDOM.findDOMNode(this.instanceInput).value,
                  select:ReactDOM.findDOMNode(this.instanceSelect).value ,
                  textarea:ReactDOM.findDOMNode(this.instanceTextArea).value ,

              }
              console.log(this.instanceInput);
              console.log(this.instanceSelect);
              console.log(this.instanceTextArea);
              console.log(formData);
          }
          render(){
              return (
                      <form onSubmit={this.handleSubmit}>
                          <input ref={instanceInput => this.instanceInput = instanceInput} type="text" defaultValue={this.state.inputValue }/>
                          <br/>
                          选项：
                          <select defaultValue={ this.state.selectValue } ref={instanceSelect => this.instanceSelect = instanceSelect}>
                              <option value="A">A</option>
                              <option value="B">B</option>
                              <option value="C">C</option>
                              <option value="D">D</option>
                              <option value="E">E</option>
                          </select>
                          <br/>
                          <textarea defaultValue={this.state.textareaValue} ref={instanceTextArea => this.instanceTextArea = instanceTextArea}></textarea>
                          <br />
                          <button type="submit">提交</button>
                      </form>
              )
          }
      }
		var formApp = ReactDOM.render(
			<FormApp />,
			document.getElementById('app')
		)
	</script>
</body>
</html>

查看结果如下所示:


 

 

React中ref的使用
fortune丶的blog
04-01 419
类式组件使用Ref 一、字符串Refs 官方目前不推荐使用这种方式创建Ref，因为这种方式存在一些问题，影响效率，可能会在后续版本移除 step 1、在要获取的DOM上，加上ref='xxx' 2、获取的时候通过this.refs.xxx获取当前DOM实例 import React, { Component, Fragment } from 'react'; class App extends Component { getName = () => { //注意：是refs
React入门笔记（三）：表单、事件、Ref属性
快去创造奇迹
12-14 3384
表单、事件实例及ref属性
从零开始学习React——(十四)：React中ref的使用方法。
qq_19249021的博客
03-16 1436
在编写组件的方法时，经常会遇到语义化很模糊的代码，这对于团队开发是一个很大问题，因为review代码或者合作时都会影响开发消息。ref在react中就是一个语义化代码的工具。 1. 替代原来的 e.target.value 以前的案例中，写下面的代码，使用了 e.target，这并不直观，也不好看。这种情况其实可以使用ref来进行解决。 inputChange(e){ this.setState({ inputValue: e.target.value }) } 如果以上代码使用r.
React 表单text、select、checkbox、radio、ref
LiuPangZi6的博客
09-17 622
import React,{Component} from 'react' class FormDemo01 extends Component { constructor (props) { super (props) // ref 先创建一个引用对象,新版本官方推荐这种ref的使用方法， //在DOM不存在的情况下不会报错 ...
React Ref 指南：原理、实现与实践
最新发布
hello！
07-06 421
React Ref是直接访问DOM元素或组件实例的重要工具，适用于管理焦点、触发动画等场景。文章介绍了Ref的演进历史，从废弃的String Refs到现代的useRef Hook，详细对比了useRef与useState的特性差异。通过实际案例展示了Ref在DOM操作、存储可变值和保存前值中的应用，还介绍了forwardRef转发和useImperativeHandle自定义实例等高级技巧。全文系统讲解了React Ref的核心概念与最佳实践，帮助开发者正确使用这一功能。
React学习笔记-----ref
iblackboy的博客
10-07 447
ref在react初期的时候是用于方便操纵dom元素的,就类似于document.getElementById()这种形式,获取dom树中的某个dom节点. 到现在为止,主要有三种使用形式 方式1: string类型绑定 类似于vue中的ref绑定方式，可以通过this.refs.绑定的ref的名字获取到节点dom 注意的是 这种方式已经不被最新版的react推荐使用，有可能会在未来版本中遗弃 方式2: react.CreateRef() 通过在class中使用React.create.
React中Ref 的使用方法详解
10-15
创建Ref对象并将其赋值给组件实例的属性，然后在`ref`属性中使用它： ```jsx class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } ...
react学习——10react中ref属性
ChenJin_2的博客
06-24 335
react学习——10react中ref属性
[React] ref属性
Supposelll的博客
02-06 2538
ref即 reference ，是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。组件被调用时会新建一个该组件的实例，而ref就会指向这个实例。它可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。为了防止内存泄漏，当卸载一个组件的时候，组件里所有的ref都会变为 null。
react Ref 的基本使用
阿飞
08-02 1470
当你在React中创建自定义组件时，如果想在父组件中使用ref引用子组件，你需要使用forwardRef方法。forwardRef允许你将ref从父组件传递到子组件中。下面是使用forwardRef在子组件中使用forwardRef方法：在子组件中使用forwardRef方法来传递ref，并将它与子组件的DOM元素或其他需要引用的元素绑定起来。同时，确保在组件定义中的第二个参数（通常称为ref）中接收传递的ref。});在上面的例子中，我们创建了一个名为的自定义子组件，并在其中使用。
react三大核心属性-ref
qq_60976312的博客
06-24 621
react三大核心属性-ref的使用
React中ref的四种使用方法
胡世林的博客
12-06 4065
react的四个ref使用方法，请注意，最好要学会使用useRef，这个才是未来的趋势！类组件中的ref已经是过去式了。
react自定义TextArea组件，不被拉伸
Csdn_____c的博客
01-30 1791
antDesign中富文本框禁止拉伸！
React(8)-组件ref引用
m0_65912225的博客
08-30 1930
目录 1.组件form 受控组件及其特点 非受控组件及其特点 模拟：简单受控组件表单 input两个方向绑定数据： 模拟：复杂(真实)受控组件表单(form里面有多种数据输入) 注意：handleChange1~5 中代码重复率高。 降低代码重复写法降低代码重复写法 模拟：非受控组件 受控组件形式自动时钟 非受控组件形式自动时钟 2.ref-函数类型实现 3.createRef实现 createRef实现自动化时钟 2.业务场景(登录)=>ref模拟for....
如何取textarea的值
germmy-神一样的开发
08-28 422
  直接取value即可。   refurl:http://bbs.youkuaiyun.com/topics/300110528    
对受控非受控组件的学习~~~
gercke的博客
10-27 272
一. refs的使用 在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到DOM进行某些操作： 管理焦点，文本选择或媒体播放。 触发强制动画。 集成第三方 DOM 库。 1. 创建ref的方式 如何创建refs来获取对应的DOM呢？目前有三种方式： 方式一：传入字符串 使用时通过 this.refs.传入的字符串格式获取对应的元素； 方式二：传入一个对象 对象是通过 React.createRef() 方式创建出来的； 使用时获取到创建的对象其
Vue中$refs的使用方法！
Power的博客
01-02 8530
Vue中$refs怎么使用呢？ 查看Vue官网$refs有两种使用方法
react获取常规的select和antd的Select的选中值2种方式
weixin_38330185的博客
12-22 8515
antd版本：4.16.13 react版本：17.0.2 import React, { Component } from 'react' import { Select } from 'antd'; const {Option} = Select export default class Test extends Component { //用onChange方法先保存select值 handleSelect=(value) => { //conso
react中如何实现下拉菜单
weixin_45625609的博客
02-07 5742
react中如何实现下拉菜单 思路： 1点击某个特定区域展示下拉框,点击其他任意区域隐藏下拉框 2选择某个选项隐藏下拉框,再次打开时滚动到选中的选项 ##### html部分 ```html <div className={styles.staticDep}> <span className={styles.label}>统计单位</span> <div ref={selectRef} onClick={() => setIsShow(!isShow)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suwu150

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值