Dom 操作

先前章節中我們知道在元件主要是與 Virtual Dom 的中間層進行互動，透過 React 事件的處理提升整體的效能，不過有時候我們也需要對實際 dom 的節點進行操作，例如第三方套件 (jQuery...)。

Refs and findDOMNode()

  var App = React.createClass({
    getInitialState: function() {
      return {userInput: ''};
    },
    handleChange: function(e) {
      this.setState({userInput: e.target.value});
    },
    clearAndFocusInput: function() {
      // Clear the input
      this.setState({userInput: ''}, function() {
        // This code executes after the component is re-rendered
        React.findDOMNode(this.refs.theInput).focus();   // Boom! Focused!
      });
    },
    render: function() {
      return (
        <div>
          <div onClick={this.clearAndFocusInput}>
            Click to Focus and Reset
          </div>
          <input
            ref="theInput"
            value={this.state.userInput}
            onChange={this.handleChange}
          />
        </div>
      );
    }
  });

上面在 input ref 屬性定義 "theInput"，在需要操作實際 dom 時可透過 React.findDOMNode(this.refs.theInput) 取得。