Published on

React - 0.14 getDOMNode Warning

問題

跟著 React 書上的範例操作時，發現出現下面的 Warning

Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by MyForm.

/*input 輸入資料後，按下 Button，Alert 輸入的資料*/
var MyForm = React.createClass({
  submitHandler: function (event) {
    event.preventDefault()

    var hellotTo = this.refs.hellotTo.getDOMNode().value
    alert(hellotTo)
  },
  render: function () {
    return (
      <form onSubmit={this.submitHandler}>
        <input ref="hellotTo" type="text" defaultValue="Hello World!" />
        <br />
        <button type="submit">Speak</button>
      </form>
    )
  },
})

原因

React v0.14 把 getDOMNode() deprecated 了

解法

不用 getDOMNode() 就好，所以上面的程式修改成：

var hellotTo = this.refs.hellotTo.value

參考網站