加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 06:45:40 所属栏目:百科 来源:网络整理
导读:其实在react的组件中获取dom节点可以使用原生的方法,同样的react也为我们提供了获取方法 我们创建通过create-react-app一个新项目 index.html !doctype htmlhtml lang="en" head meta charset="utf-8" meta name="viewport" content="width=device-width,in

其实在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();

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读