React笔记07——React 中 ref 的使用

在一些特殊情况下,React也需要对DOM进行一些操作,这时就要用到——ref

理解ref

1)例子:用上一节的Counter.js项目来理解,实现获取增加按钮距离浏览器窗口顶部的距离。

import React,{ Component,Fragment } from 'react';
import Child from './Child'

class Counter extends Component{
	constructor(props) {
		super(props);
		this.handleBtnClick = this.handleBtnClick.bind(this);
		this.state = {
			counter:1
		}
	}
	handleBtnClick(){
		// console.log(this.buttonElem);//button节点
		// console.log(this.buttonElem.clientTop);
		const newCounter = this.state.counter + 1;
		this.setState({
			counter:newCounter
		});
	}
	render() {
		return (
			<Fragment>
				<button onClick = {this.handleBtnClick}
						ref = {(button) => {this.buttonElem = 
                                                button}}
				>
					增加
				</button>
				<Child number = {this.state.counter}/>
			</Fragment>
		)
	}
}

export default Counter;

ref 写在html标签上,获取的是DOM节点;

ref 写在组件标上,获取的是组件的JS实例。

2)setState是异步的!

import React,{ Component,Fragment } from 'react';

class Counter extends Component{
	constructor(props) {
		super(props);
		this.handleBtnClick = this.handleBtnClick.bind(this);
		this.state = {
			counter:1
		}
	}
	handleBtnClick(){
		const newCounter = this.state.counter + 1;
		console.log(this.divElem.innerHTML);//第一个
		this.setState({
			counter:newCounter
		});
		console.log(this.divElem.innerHTML);//第二个
	}
	render() {
		return (
			<Fragment>
				<button onClick = {this.handleBtnClick} >增加</button>
				<div ref = {(div)=>{this.divElem = div}}>{this.state.counter}</div>
			</Fragment>
		)
	}
}

export default Counter;

上面的代码中,每当点击一次按钮,两个console输出的都是相同的数字,这是因为setState是异步的,在第二个cosole执行时,可能还没有执行它,因此没有输出更改后的值。

我们可以将setState方法做一些修改,在里面传递两个函数参数,在setState把数据改变之后会执行第二个函数,这时第二个console输出的就是改变后的值了!

	handleBtnClick(){
		const newCounter = this.state.counter + 1;
		console.log(this.divElem.innerHTML);
		this.setState(() => {
			return {
				counter:newCounter
			}
		},()=>{
			console.log(this.divElem.innerHTML);
		})
	}

ref小练习

React笔记07——React 中 ref 的使用

需求:在input中输入内容,当点击按钮之后,通过ref获取Dom节点的内容,把获取出来的内容输出在控制台。

以下是我的实现代码:

import React,{ Component,Fragment } from 'react';

class Ref extends Component{
	constructor(props) {
		super(props);
		this.handleInputElem = this.handleInputElem.bind(this);
		this.handleInputChange = this.handleInputChange.bind(this);
		this.state = {
			content:''
		}
	}
	handleInputElem() {
		const newContent = this.state.content;
		this.setState(()=>{
			return {
				content:newContent
			}
		},()=>{
			console.log(this.inputElem.value);
		});
	}
	handleInputChange(e) {
		this.setState({
			content:e.target.value
		})
	}
	render() {
		return (
			<Fragment>
				<input value = {this.state.content} ref = {(input)=>{this.inputElem = input}} onChange = {this.handleInputChange}></input>
				<button onClick = {this.handleInputElem}>提交</button>
			</Fragment>
		)
	}
}

export default Ref;

  

 

  

上一篇:2019-6-13 - 久谦咨询


下一篇:React 3 - setState()