React的Refs方法获取DOM实例和访问子组件方法及属性

geekzhou 发布于2019-08-21 14:16 / 4176人阅读

摘要：绑定属性调用的时候使用调用子组件方法这是一个很神奇的方法，它可以调用子组件的方法以及属性。建立组件建立子组件，并在子组件实现一个方法，如，这个方法实现变更当前组件上面的文本，提供这样一个测试用例。输入框获取焦点完整实例点我输入框获取焦点

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

ref : 绑定属性

refs : 调用的时候使用

调用子组件方法

这是一个很神奇的方法refs，它可以调用子组件的方法以及属性。下面用一个例子来实现调用子组件方法。

建立组件

建立子组件MyComponent.js，并在子组件实现一个方法，如:subHandleClick，这个方法实现变更当前组件上面的文本，提供这样一个测试用例。

使用子组件

通过import SubComponent from "./SubComponent"来引用子组件SubComponent，在 render方法中注册使用组件

render(){
  return(
    
  )
}

绑定ref属性

在子组件调用上面绑定一个值为subcomponents的属性ref，subcomponents

调用子组件方法

在入口父组件App.js中，添加方法handleClick，去调用子组件SubComponent.js中的subHandleClick方法

handleClick(){
  //this.refs.subcomponents可以访问子组件的方法
  //也可以获取子组件的state...
  this.refs.subcomponents.subHandleClick();
}

完整实例

入口父组件App.js

import React, { Component } from "react";
import SubComponent from "./SubComponent"
class MyComponent extends Component {
  handleClick(){
    this.refs.subcomponents.subHandleClick();
  }
  render(){
    return(
      
        
        
      
    )
  }
}

ReactDOM.render(
  , 
  document.querySelector("#app")
);

子组件SubComponent.js

import React, { Component } from "react";
export default class SubComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "这里是初始化文本"
    };
  }
  subHandleClick(){
    this.setState({text: "文本被改变啦！哈哈！"})
  }
  render(){
    return(
      
        查看：{this.state.text}
      
    )
  }
}

访问父组件方法

父组件Parent.js

class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
     value:""
    }
  }
  refresh(){
    // 这里箭头函数很重要
    return ()=>{
        this.setState({value:"这里是子组件调用的方法"})
    }
  }
  render(){
    return (
      
        兄弟组件沟通
        
        {this.state.value}
      
    )
  }
}

ReactDOM.render(, document.getElementById("app"));

子组件SubComponent.js

import React, { Component } from "react";
export default class SubComponent extends Component {
  constructor(props) {
    super(props);
  }
  subHandleClick(){
    this.setState({text: "文本被改变啦！哈哈！"})
  }
  render(){
    return(
      
        
      
    )
  }
}

获取DOM实例

通过ref属性，你可获取，实例中的属性方法，甚至可以通过他获取到DOM实例节点this.refs.myInput.getDOMNode()

ref 属性绑定

refs 获取DOM实例

获取支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

// 输入框获取焦点
this.refs.myInput.focus()

完整实例

import React, { Component } from "react";
class MyComponent extends Component {
  handleClick(){
    this.refs.myInput.focus();
  }
  render(){
    return(
      
        
        
      
    )
  }
}

ReactDOM.render(
  , 
  document.querySelector("#app")
);

idc机房托管服务器托管 php获取dom属性 dom方法获取子元素属性 js php获取变量的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87836.html

React中Ref 的使用 React-踩坑记_05

摘要：中的使用在典型的数据流中，是父组件与其子组件交互的唯一方式。创建是使用属性创建的，并通过属性附加到元素。此外，这不适用于功能组件。如果使用或更高版本，我们建议在这些情况下使用。引用转发允许组件选择将任何子组件的引用公开为自己的组件。 React中Ref 的使用 React v16.6.3 在典型的React数据流中，props是父组件与其子组件交互的唯一方式。要修改子项，请使用new...

glumes 2019-08-05 18:08 评论0 收藏0
如何在 React 组件中正确使用 Refs的指南

摘要：通常在组件的构造函数内创建，使其在整个组件中可用。例如纯文本查看复制代码如上所示一个实例在构造函数中创建，并赋值给在方法内部，将构造函数中创建的传递给接下来，让我们看一个在组件中使用的示例。回调回调是在中使用的另一种方式。使用 React 时，我们的默认思维方式应该是不会强制修改 DOM ，而是通过传入 props 重新渲染组件。但是，有些情况却无法避免修改 DOM 。React ...

Backache 2019-08-02 15:12 评论0 收藏0
react 生命周期

摘要：一个组件的生命周期分为三个部分实例化存在期和销毁时。如果回调函数以函数的方式来指定，那么在组件更新的时候回调会被调用次。一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。实例化阶段客户端渲染时，如下依次被调用 getDefaultProps() getInitialState() componentWillMount() render() component...

Fundebug 2019-08-23 16:42 评论0 收藏0
React

摘要：基础创建虚拟参数元素名称，例如参数属性集合，例如，，，从参数开始，表示该元素的子元素，通常这些元素通过创建，文本文件可以直接插入嘻嘻哈哈这是渲染器，将元素渲染到页面中。 React简介 FeceBook开源的一套框架，专注于MVC的视图V模块。实质是对V视图的一种实现。 React框架的设计没有过分依赖于某个环境，它自建一套环境，就是virtual DOM（虚拟DOM）。提供基础AP...

hlcc 2019-08-22 10:35 评论0 收藏0
02.react进阶指南

摘要：指定读取当前的。它为其后代元素触发额外的检查和警告。严格模式检查仅在开发模式下运行它们不会影响生产构建。作用识别不安全的生命周期关于使用过时字符串的警告关于使用废弃的方法的警告检测意外的副作用检测过时的为高阶组件。 react 进阶懒加载 React.lazy函数能让你像渲染常规组件一样处理动态引入（的组件）。Suspense加载指示器为组件做优雅降级。fallback属性接受任何在...

zzbo 2019-08-26 10:40 评论0 收藏0