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

一.概述

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

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

二.操做DOM

1. ReactDOM.findDOMNode()

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

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

点击按钮后 ,按钮字体变红 使用findDOMNode 操做java

//建立事件
  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";

  }

这种方式更加好react

  1. Refs 是访问到组件内部DOM 节点惟一可靠的方法
  2. Refs会自动销毁对子组件的引用
  3. 不要在render 或 render  以前对 Refs 进行调用。要在事件内进行调用,不能再构造函数中调用。
  4. 不要多用,更多运用 state
相关文章
相关标签/搜索