React refs

在一些特殊情况下，直接操作组件实例的方法还是必要或者有利的。所以React提供了一个打破限制的办法，这就是refs。refs（reference,引用）在以下时候特别有用：当你需要直接操作一个被组件所渲染的DOM元素，或者在一个大型的非React应用中使用一个React组件，或者是把你已有的代码库在React中复用。

---

Use refs####

在这里，我主要是讲给大家怎么用React refs获取下面写博客页面里输入框的值。当点击Publish This Blog按钮后，可以获取到输入框的值，并在控制台显示。

写博客页面.png

---

第一步：建立组件###

建立组件BlogNewed.js，代码如下

import React, {Component} from 'react';

class BlogNewed extends Component {
  render() {
    return (
        <form className="row blog-newed">
          <input type="text" className="form-control blog-name"/>
          <textarea className="form-control" rows="10" cols="1>
          <input  type="text" className="form-control blog-tags"/>
          <button type="button" className=" btn-info" >
            Publish This Blog
          </button>
        </form>

    );
  }
}
export default BlogNewed;

第二步：添加点击事件###

给上述代码的提交按钮Publish This Blog添加点击事件
onClick={this.handleClick.bind(this)}

 <button type="button" className="btn-info" onClick={this.handleClick.bind(this)}>
   Publish This Blog
</button>

第三步：绑定ref###

给上述代码的每个输入框绑定ref属性

 <input ref="blogName" type="text" className="form-control blog-name"/>
 <textarea ref="blogContent" className="form-control" rows="10" cols="10"/>
 <input ref="blogTag" type="text" className="form-control blog-tags"/>

第四步：获取输入框的值###

import React, {Component} from 'react';

class BlogNewed extends Component {
  handleClick() {
    var blogName = this.refs.blogName.value.trim();
    var blogContent = this.refs.blogContent.value.trim();
    var blogTag = this.refs.blogTag.value.trim();
    console.log("博客标题 为：" + blogName);
    console.log("博客内容 为:" + blogContent);
    console.log("博客标签 为: " + blogTag);  
  }

注意到当 input 中 ref = "blogName" ，那么访问真正的组件实例时用this.refs.blogName；进一步用this.refs.blogName.value.trim() 获取输入框中去掉空格后的值。

如下图，在控制台显示：

输出.png

• [查看refs demo](git remote add origin git@github.com:yujuan123/react-refs-demo.git)
• 可以结合这个react-refs理解

每天都努力一点
谢谢你看完

---