React this.refs.dom与ReactDOM.findDOMNode使用与区别

一、选取 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!