reactJS -- 9 组件的Refs(操作DOM的两种方法)

2019独角兽企业重金招聘Python工程师标准>>>

一.概述

https://react-cn.github.io/react/docs/more-about-refs.html

组件的Refs用来获取原生的HTML节点　

二.操作DOM

1. ReactDOM.findDOMNode()

  <input id= "submitButton" type= "button" value="submit" 

onClick={this.changerUserInfo.bind(this, 99)}/>

点击按钮后 ，按钮字体变红 使用findDOMNode 操作

  //创建事件
  changerUserInfo(age) {
    this.setState({age : age});
    //第一种方式
    var mySubmitButton = document.getElementById('submitButton');
    ReactDOM.findDOMNode(mySubmitButton).style.color = 'red';
    console.log('a');

  }

2.定义Refs

给input 增加  ref = ''''  属性

<input id="submitButton" ref="submitButton"  type= "button" value="submit" onClick=

{this.changerUserInfo.bind(this, 99)}/>

this.refs.submitButton 获取input对象

  //创建事件
  changerUserInfo(age) {
    this.setState({age : age});
    console.log(this.refs.submitButton);

  }
// ==> <input type= "button" id = "submitButton" value= submit/>

操作

  //创建事件
  changerUserInfo(age) {
    this.setState({age : age});
    console.log(this.refs.submitButton);
    this.refs.submitButton.style.color = "red";

  }

这种方式更加好

1. Refs 是访问到组件内部DOM 节点唯一可靠的方法
2. Refs会自动销毁对子组件的引用
3. 不要在render 或 render  之前对 Refs 进行调用。要在事件内进行调用，不能再构造函数中调用。
4. 不要多用，更多运用 state

转载于:https://my.oschina.net/u/2991733/blog/1143053