React this.refs.dom与ReactDOM.findDOMNode使用与区别

ccj659 发布于2019-08-20 18:09 / 520人阅读

摘要：一选取元素获取节点的获取组件的只能由获取组件的真实节点不太推荐或废弃了以上的用法，而是用

一、选取 DOM 元素

1.this.refs.name获取dom节点的DOMNode

handleSubmit = () => {
    let name = this.refs.name.value,    // 获取DOMnode
        content = this.refs.content.value,
        publishTime = this.refs.publishTime.value,
        _test = this._test.value;

        console.log(name, content, publishTime, _test);
}

name:

2.组件的DOMNode只能由ReactDOM.findDOMNode获取

componentDidMount() {
    console.log(this.refs.commnet);    // undefined
    // console.log(this.refs.commnet.offsetWidth);
    console.log(ReactDOM.findDOMNode(this.refs.comment));    //Comment组件的真实dom节点:
    console.log(ReactDOM.findDOMNode(this.refs.comment).offsetWidth);    // 1904
}

3.React不太推荐或废弃了以上refs的用法，而是用ref callback

_test = this._test;
console.log(_test.value);

test:  this._test = test } />

GPU云服务器云服务器阿里大于与阿里与通信区别 linux与区别大数据与区别 html .与区别

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

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

5、React组件事件详解

摘要：组件事件响应在构建虚拟的同时，还构建了自己的事件系统且所有事件对象和规范保持一致。的事件系统和浏览器事件系统相比，主要增加了两个特性事件代理和事件自动绑定。 React组件事件响应 React在构建虚拟DOM的同时，还构建了自己的事件系统；且所有事件对象和W3C规范保持一致。 React的事件系统和浏览器事件系统相比，主要增加了两个特性：事件代理、和事件自动绑定。 1、事件代理 ...

Ververica 2019-08-22 15:13 评论0 收藏0
ReactDOM You Should

摘要：并不是组件中的任何地方都能够使用获取结构，只对挂载后的组件生效。组件的一个特殊属性，接受一个回调函数作为参数。反之，则表示卸载失败。再看一下这段代码这个回调函数其实是没有参数的，但是，当方法变成异步方法之后，说不定就会向其注入一些参数了。在react的组件的开发过程中，一般来说，我们并不会真正的去操作dom。只有在顶层组件的渲染的过程中，我们借助ReactDOM.render()方法...

mo0n1andin 2019-08-20 19:07 评论0 收藏0
react开发教程（六）React与DOM

摘要：当组件装载完毕时，就会被调用。它可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。也可以是一个字符串吧放到原生的组件中，我们可以通过获取到节点而如果吧放到组件上获取到的就是组件的实例上一篇开发教程五生命周期下一篇开发教程七事件系统 ReactDOM findeDOMNode 语法：DOMElement findDOMNode(ReactComponent component)...

call_me_R 2019-08-21 11:51 评论0 收藏0
React基础再回顾

摘要：方法一必须在这里绑定方法二使用属性初始化器语法需要开启以上方法三在使用时绑定方法四在回调函数中使用箭头函数渲染的时候都会创建一个不同的回调函数。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。从16年夏天初学React，到17年正式投入到工作中使用，直到现在V16.2发版，React发生了巨大的变化，最近在工作中使用时遇到很多基础不是非常清晰，借此再...

2450184176 2019-08-22 15:16 评论0 收藏0