React：DOM操作

var MyInput = React.createClass({
  render: function(){
    returen (
      <input type="text" ref="myInput" />
    );
  }
});

var MyInput = React.createClass({   
  render: function(){   
    return (<input type="text" ref="myInput" onKeyUp={this.handleKeyUp}/>);
  },
  handleKeyUp: function(){   
    var input = this.refs.myInput;   
    console.log(input.value);   
  },   
  componentDidMount: function(){   
    console.log(this.refs.myInput);   
  }   
});   
ReactDOM.render(   
  <MyInput />,   
  document.body   
);

var MyInput = React.createClass({   
  render: function(){   
    return (<input type="text" ref="myInput" onKeyUp={this.handleKeyUp}/>);
  },
  handleKeyUp: function(){   
    var input = ReactDOM.findDOMNode(this);
    //或者
    input = ReactDOM.findDOMNode(this.refs.myInput);   
    console.log(input.value);   
  } 
});   
ReactDOM.render(   
  <MyInput />,   
  document.body   
);

(function(){   
  var autocomplete = function(params){   
    params = params || {};   
    if(!params.target) return;   
      var parent = params.target;   
      var data = params.data;   
      var list = '';   
      for(var i = 0; i < params.data.length; i++){   
        list += '<li>' + params.data[i] + '</li>';   
      }   
      parent.innerHTML = list;   
      if(params.events){   
        parent.addEventListener('click',function(e){   
          if(e.target.nodeName == 'LI'){   
            params.events.select(e.target.textContent);   
          }   
        });   
      }   
  };   
  window.autocomplete = autocomplete;  
})();

autocomplte({
  target: document.getElementById('cities'),
  data: [
    '广州','北京','深圳'
  ],
  events: {
    select: function(city){
      alert('你选择的城市是' + city);
    }
  }
});

var AutocompleteCities = React.createClass({
  render: function(){
    return (<div id="cities" ref="autocompleteTarget" />);
  },
  getDefaultProps: function(){
    return { 
      data: ['广州','北京','深圳']
    };
  },
  handleSelect: function(city){
    alert('你选择的城市是' + city);
  },
  componentDidMount: function(){
    autocomplete({
      target: this.refs.autocompleteTarget,  //也可以使用ReactDOM.findDOMNode(this.refs.autocompleteTarget)
      data: this.props.data,
      events: {
        select: this.handleSelect
      }
    });
  }
});

• 当仅使用虚拟DOM无法满足需求时，可以考虑ref属性，它允许访问指定的元素
• 在render方法执行之后，并且react已经完成了DOM的更新（一般是componentDidMount执行后）时，可以使用this.refs.name或者ReactDOM.findDOMNode()方法来访问底层的DOM节点。
• 可以将简单的第三方类库（非React类库）重写为React组件的形式来封装它。