React.jsDOM获取方式

最新推荐文章于 2024-04-11 18:47:17 发布

IT战小泽

最新推荐文章于 2024-04-11 18:47:17 发布

阅读量409

点赞数 1

CC 4.0 BY-SA版权

分类专栏：框架文章标签： React.js

本文链接：https://blog.youkuaiyun.com/qq_37267302/article/details/65627852

框架专栏收录该内容

4 篇文章

订阅专栏

本文通过一个具体的React应用实例介绍了如何使用ReactDOM.findDOMNode方法来获取DOM节点。示例中展示了如何在React组件中定义引用(refs)并利用findDOMNode方法在组件的生命周期方法中访问这些DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="build/react.min.js"></script>
    <script src="build/react-dom.min.js"></script>
    <script src="build/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">

    var app=document.getElementById("app");

    var HelloMessage=React.createClass({

        handleBlur:function () {

          //var node1=this.refs.input1.getDOMNode();第一种<input type="text" placeholder="请输入电话号码" data-reactid=".0.0">
            //var node2=React.findDOMNode(this.refs.input1);//第二种    打印结果为<input type="text" placeholder="请输入电话号码" data-reactid=".0.0">
            //var node3=this.refs['input1'].getDOMNode();//<input type="text" placeholder="请输入电话号码" data-reactid=".0.0">
            var node4=ReactDOM.findDOMNode(this.refs['input1'])//<input type="text" placeholder="请输入电话号码" data-reactid=".0.0">


          console.log(node4);

        },
        render:function () {



            return<div>
                <input type="text"  placeholder="请输入电话号码" ref="input1" onBlur={this.handleBlur}/>
            </div>



        }



    });
    React.render(<HelloMessage/>,app)


</script>
</html>