A-A+

React Refs添加一个组件的引用

2017年11月15日 javascript, Web开发 暂无评论 阅读 33 views 次

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。

这种特性,让我想到了jquery中的$符号。虽然两者有本质的区别的,但起到的作用,好像是一样的。

使用方法

绑定一个 ref 属性到 render 的返回值上:

<input ref="myInput" />

在其它代码中,通过 this.refs 获取支撑实例:

var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.getBoundingClientRect();

下面是一个具体的例子:

import React, { Component } from 'react';

class LikeButton extends Component {
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            liked: { liked: false }
        };

        // ES6 类中函数必须手动绑定
        this.handleClick = this.handleClick.bind(this);
    }
    componentWillMount() {
        console.log('Component WILL MOUNT!在渲染前调用,在客户端也在服务端')
    }
    componentDidMount() {
        console.log('Component DID MOUNT!在第一次渲染后调用,只在客户端')
    }
    componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!在组件接收到一个新的prop时被调用')
    }
    shouldComponentUpdate(newProps, newState) {
        console.log("shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用");
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!在组件接收到新的props或者state但还没有render时被调用');
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE在组件完成更新后立即调用!')
    }
    componentWillUnmount() {
        console.log('Component WILL UNMOUNT在组件从 DOM 中移除的时候立刻被调用!')
    }
    handleClick(event) {
        this.setState({
            liked: !this.state.liked
        });
        this.refs.myInput.value = "哈哈,好用了!";
        // this.state = { liked: !this.state.liked };
    }
    render() {

        let text = this.state.liked ? '喜欢' : '不喜欢';
        return ( < div > < input type = "text"
            ref = "myInput" / > < button onClick = {
                this.handleClick
            } > {
                text
            } < /button></div > );
    }
}

export default LikeButton

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: