react学习笔记13：获取DOM节点Refs和findDOMNode

最新推荐文章于 2025-05-30 08:05:08 发布

weixin_34290352

最新推荐文章于 2025-05-30 08:05:08 发布

阅读量574

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/tbd/blog/1550260

版权

为什么80%的码农都做不了架构师？>>>

其实在react的组件中获取dom节点可以使用原生的方法，同样的react也为我们提供了获取方法

我们创建通过create-react-app一个新项目

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div> 
  </body>
</html>

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';

class App extends Component {

	
	render() {
		return (
			<div className="App">
				demo
				<input type="text" id="input" />
			</div>
		);
	}
	
}


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

切换到项目执行：

npm start

1.原生方法

这个就非常简单了,我们在结构中添加了input，给input设置一个value，然后在生命周期函数中打印出来即可，利用

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';

class App extends Component {

	constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            val:"我是小a"
        };

    }
	
	render() {
		return (
			<div className="App">
				demo
				<input type="text" id="input" defaultValue={this.state.val} />
			</div>
		);
	}
	
	componentDidMount () {
		//组件渲染完毕
		console.log(document.getElementById("input").value)
	}
	
}


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

我们可以看到结果：

3.Refs

这是react为我们提供的一个节点查找工具，我们可以给标签设置一个 ref 属性，然后在其他位置通过

this. refs.xx获取

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';

class App extends Component {

	constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            val:"我是小a"
        };

    }
	
	render() {
		return (
			<div className="App">
				demo
				<input type="text" defaultValue={this.state.val} ref="input" />
			</div>
		);
	}
	
	componentDidMount () {
		//组件渲染完毕
		console.log(this.refs.input.value)
	}
	
}


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

2.findDOMNode

这个方法我们也是返回dom节点，是通过

ReactDOM.findDOMNode()

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';

class App extends Component {

	constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            val:"我是小a"
        };

    }
	
	render() {
		return (
			<div className="App">
				demo
				<input type="text" id="input2" defaultValue={this.state.val} ref="input" />
			</div>
		);
	}
	
	componentDidMount () {
		//组件渲染完毕

		console.log(ReactDOM.findDOMNode(this.refs.input))
	}
	
}


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

转载于:https://my.oschina.net/tbd/blog/1550260