zoukankan      html  css  js  c++  java
  • React中使用 ref 和 findDomNode

    对于 React 组件来说,refs 会指向一个组件类的实例,所以可以调用该类定义的任何方法。
    如果需要访问该组件的真实 DOM,可以用 ReactDOM.findDOMNode 来找到 DOM 节点,但我们并
    不推荐这样做。因为这在大部分情况下都打破了封装性,而且通常都能用更清晰的办法在 React
    中构建代码。

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    class Comp extends Component {
        inner() {
          console.log('inner')
        }
        render() {
            return (
              <div>
                <input type="input"/>
              </div>
            )
        }
    }
    
    class App extends Component {
        constructor () {
          super()
        }    
        componentDidMount () {
          const myComp = this.refs.myComp;
          myComp.inner();  //访问子组件的函数
          const dom = ReactDOM.findDOMNode(myComp);
          dom.childNodes[0].value = 'hello';
          dom.childNodes[0].focus();
        }
        render() {
            return (
              <div>
                <Comp ref="myComp" />
              </div>
            );
        }
    }
    
    export default App;
  • 相关阅读:
    Java面试题3
    Git 命令
    Flutter 基础控件
    Flutter工程目录
    GitHub简介
    Android Studio 安装 Flutter
    Android 权限管理
    结构型模式-适配器模式
    结构型模式-外观模式
    结构型模式-组合模式
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924766.html
Copyright © 2011-2022 走看看