React this.refs.dom與ReactDOM.findDOMNode使用與區別

1、選取 DOM 元素

1.this.refs.name獲取dom節點的DOMNode

handleSubmit = () => {
    let name = this.refs.name.value,    // 獲取DOMnode
        content = this.refs.content.value,
        publishTime = this.refs.publishTime.value,
        _test = this._test.value;

        console.log(name, content, publishTime, _test);
}

<div>name: <input type="text" ref="name" /></div>

2.組件的DOMNode只能由ReactDOM.findDOMNode獲取

componentDidMount() {
    console.log(this.refs.commnet);    // undefined
    // console.log(this.refs.commnet.offsetWidth);
    console.log(ReactDOM.findDOMNode(this.refs.comment));    //Comment組件的真實dom節點:<div>
    console.log(ReactDOM.findDOMNode(this.refs.comment).offsetWidth);    // 1904
}

<div>
    <CommentList ref="comment" />
</div>

3.React不太推薦或廢棄了以上refs的用法，而是用ref callback

_test = this._test;
console.log(_test.value);

<div>test: <input type="text" ref={ test => this._test = test } /></div>