精华内容
下载资源
问答
  • React获取DOM节点

    2018-11-16 14:03:05
    React获取DOM节点

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

    也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                   

    1、问题背景

         利用React获取DOM节点,需要利用ref属性


    2、实现源码

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>React获取DOM节点</title>  <script type="text/javascript" src="../js/react.js" ></script>  <script type="text/javascript" src="../js/react-dom.js" ></script>  <script type="text/javascript" src="../js/browser.min.js" ></script>  <script type="text/babel">   var Cat = React.createClass({    cutClick:function(){     this.refs.person.focus();    },    render:function(){     return (      <div>       <input type="text" ref="person" />       <input type="button" value="查询" onclick="{this.cutClick}" />      </div>     )    }   });      ReactDOM.render(    <Cat />,    document.getElementById("catQuery")   );  </script> </head> <body>  <div id="catQuery"></div> </body></html>

    3、实现结果

        

               

    给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

    这里写图片描述
    展开全文
  • React Hook可以利用useRef获取DOM节点 代码an import React, { useEffect, useRef } from 'react' function UseRef() { const btnRef = useRef(null) // 初始值 useEffect(() => { console.log(btnRef....

    React Hook可以利用useRef获取DOM节点

    代码范例:

    import React, { useEffect, useRef } from 'react'
    
    function UseRef() {
        const btnRef = useRef(null) // 初始值
    
        useEffect(() => {
          console.log(btnRef.current) // DOM 节点
        })
    
        return <div>
                <button ref = {btnRef}>click</button>
            </div>
        
    }
    
    export default UseRef

     

    展开全文
  • React获取DOM节点的两种方法

    千次阅读 2020-01-05 07:06:06
    React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。 1、findDOMNode findDOMNode通常用于React组件的引用,其语法如下: import ReactDOM from 'react-dom'; ReactDOM.findDOMNode...

    React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。

    1、findDOMNode

    findDOMNode通常用于React组件的引用,其语法如下:

    import ReactDOM from 'react-dom';
    ReactDOM.findDOMNode(ReactComponent);
    复制代码

    当组件被渲染到DOM中后,findDOMNode会返回该组件实例对应的DOM节点。

    示例:

    componentDidMount(){
        const dom = ReactDOM.findDOMNode(this);
        // this为当前组件的实例
    }
    
    render() {}
    复制代码

    注:如果render()中返回null,那么findDOMNode()也返回null。findDOMNode只对已经挂载的组件有效。

    2、refs

    refs多用于React组件内子组件的引用。使用ref获取DOM节点有两种情况:

    (1)子组件为原生DOM组件:获取到的就是这个DOM节点。如下例,this.input就获取到了当前<input />节点。

    <input ref={(ref)=>{this.myInput = ref}} />
    复制代码

    通过this.myInput,我就可以对<input />进行一系列操作,比如让输入框聚焦:

    this.myInput.focus();
    复制代码

    注:refs也支持字符串格式:

    <input ref='myInput' />
    复制代码

    通过this.refs.myInput获取到节点。

    (2)子组件为React组件,比如<MyInput/>:获得的就是<MyInput/>的实例,因此就可以调用<MyInput/>的实例方法。
    示例:

    componentDidMount(){
        const myComp = this.refs.myComp;  // 获取到的是<Comp />的实例myComp
        const dom = ReactDOM.findDOMNode(myComp);  // 获取到实例对应的DOM节点
    }
    
    render(){
        return (
            <div>
                <Comp ref='myComp' />
            </div>
        );
    }
    复制代码

    注:调用<Comp />实例方法的方式:this.refs.myComp.method(),但并不建议这种调用方式。


    展开全文
  • react 官方给我提供了一个 ref 把想要获取的div的dom绑定上 ref{this.name} this.名字是自己取得。下面是代码: import React from 'react' export default class form_input extends React.Component{ ...

    react 官方给我提供了一个 ref 把想要获取的div的dom绑定上 ref{this.name} this.名字是自己取得。下面是代码:
    在这里插入图片描述
    在这里插入图片描述

    import React from 'react'
    export default class form_input extends React.Component{
        constructor(){
            super()
            // 获取DOM节点
            this.dom = React.createRef();
            this.usname = React.createRef()
            this.age = React.createRef()
        }
        // 获取DOM节点
        componentDidMount(){
            this.dom.current.style.color = 'red'
        }
        // 获取input DOM节点
        sbmmt(){
            console.log(this.usname.current.value)
            console.log(this.usname.current.value)
        }
        render(){
            return(
                <div>
                    <hr/>
                    {/* 获取DOM节点 */}
                    <h1 ref={this.dom}>表单组件</h1> 
                      {/*获取input dom 节点  */}
                      <input type="text" ref={this.usname}></input>
                      <input type="text" ref={this.age}></input>
                      <button onClick={this.sbmmt.bind(this)}>提交信息</button>
                </div>
            
                
            )
        }
    }
    
    

    在这里插入图片描述
    改变的颜色和输入的值现在都能获取的到

    展开全文
  • React获取底层DOM节点ref属性

    千次阅读 2018-10-26 14:12:32
    React中,有时需要访问底层DOM节点来执行一些命令式操作。 class Focus extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) } handleClick() ...
  • React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。 1、findDOMNode ...当组件被渲染到DOM中后,findDOMNode会返回该组件实例对应的DOM节点。 示例: componentDidMount()..
  • 二、React 获取dom节点 2.1第一种获取方式 import React, { Component } from "react"; import "../assets/css/index.css"; class Home extends Component { //固定写法 constructor(props) { super(props);...
  • 获取真实的DOM节点: 1.组建并不是真实的DOM节点,只是虚拟DOM; 2.虚拟DOM拿不到输入框中用户输入的数据,所以要使用ref属性来获取真实的DOM节点,this.refs[refName]用来获取真实的DOM节点; 3.必须等到...
  • React 获取真实的DOM节点

    千次阅读 2017-02-19 10:16:16
    获取真实的DOM节点 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。 有时需要从组件获取真实 DOM 的节点,这时...
  • react如果想要获取真实dom节点的话: 需要dom节点上写ref属性 console.log(this.refs.inputDom); reder(){ return ( <div className="container"> <input ref="inputDom" /> </div> ) } ....
  • React获取Dom高度

    千次阅读 2020-05-11 10:18:17
    最近这个React的问题困惑了我几天,总结下React获取Dom 高度 React可以正常获取内容为文字的元素高度,但如果要获取img元素的高度,必须对Img设置固定的高度才可以获取,否则img的高度始终是0; 在...
  • 一、通过内敛样式函数的方式获取dom。此种方式在每次更新数据的时候都需要先将c元素置为null,所以需要 渲染两次。但是不会影响页面的展示。 class Demo extends React.Component { showInfo = () => { ...
  • React 获取虚拟dom节点的两种方法

    千次阅读 2016-11-18 16:08:29
    第一种常规做法: &lt;div className="confirm-money" ref="totalNeedPayRef"&gt;...import React from 'react';...import { findDOMNode } from 'react-dom'; const { totalNeedPa...
  • React获取DOM方法2018

    千次阅读 2018-07-09 11:16:17
    js 常规dom操作方式,通过id获取dom2.react原生函数findDOMNode获取dom3.通过ref来定位一个组件,切记ref要全局唯一(类似id)import React, { Component } from 'react';import ReactDOM from 'react-dom'; class ...
  • import { useRef, useState, useEffect } from "react"; const constructionHeight = useRef(); const { current } = constructionHeight; const [constructionFormHeight, setConstructionFormHeight] = useState...
  • React获取DOM方法

    万次阅读 2017-08-31 16:19:34
    以下提供三种方法: import React, { Component } from 'react...import ReactDOM from 'react-dom'; class Index extends Component { onClick(event){ console.log(event.target.value); // 第一种方式 var subm
  • 怎么获取reactdomReact提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。1、findDOMNodefindDOMNode通常用于React组件的引用,其语法如下:import ReactDOM from 'react-dom';ReactDOM....
  • React中,组件并不是真实的DOM节点,而是一种存在于内存之中的一种数据结构,叫做虚拟 DOM ...有时候,我们需要从组件中获取真实的DOM节点,这个时候可以用ref属性,下面来看一个demo: <!DOCTYPE html>..
  • React获取DOM元素-ref属性

    千次阅读 2020-09-01 12:54:00
    React获取DOM元素-ref属性 类组件 通过ref给元素做标记(react不推荐使用) <div id="app"></div> <script type="text/babel"> class App extends React.Component{ componentDidMount(){ /...
  • 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React与VUE 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,...
  • React获取真实DOM节点的几种方法

    千次阅读 2018-12-16 16:12:15
    在使用React编写代码时,难免会遇到需要获取到真实DOM节点的时候,那么在React中我们怎么去获取呢?以下总结了几种方法: 1. 通过在标签中添加ref属性(react官方已弃用) class Index extends Component {  ...
  • 键盘事件 表单事件 事件对象以及React中的ref获取dom节点React实现类似Vue的双向数据绑定   获取执行事件的dom节点以及DOM属性: run=(event)=&gt;{ console.dir(event) /*获取执行事件的dom节点 ...
  • React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。1、findDOMNodefindDOMNode通常用于React组件的引用,其语法如下:import ReactDOM from 'react-dom';ReactDOM.findDOMNode(React...
  • ReactNative中获取真实的DOM节点

    千次阅读 2018-01-06 17:50:32
    获取真实的DOM节点ReactNative中,可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值,根据diff算法算出来有差以后,就会执行ReactDom的render方法,重新渲染页面 ...
  • 通过DOM节点获取React组件数据 从组件本身内部检索React组件的DOM节点是相当简单的,但是如果您想向后工作怎么办:按DOM节点检索组件的实例呢? 这是旧的Dojo Toolkit的Dijit框架使用dijit.byId方法所允许的dijit...
  • 下面小编就为大家带来一篇react.js 获取真实的DOM节点实例(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,403
精华内容 9,361
关键字:

react获取dom节点