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方法執(zhí)行之后，并且react已經(jīng)完成了DOM的更新（一般是componentDidMount執(zhí)行后）時，可以使用this.refs.name或者ReactDOM.findDOMNode()方法來訪問底層的DOM節(jié)點。
• 可以將簡單的第三方類庫（非React類庫）重寫為React組件的形式來封裝它。