文章目录

点击这里访问站长的博客

获取到对应的 DOM 之后可以做很多操作，比如在后面 append 一些东西以及修改对应的 style

1. js 常规 dom 操作方式，通过 id 获取 dom
2. react 原生函数 findDOMNode 获取 dom
3. 通过 ref 来定位一个组件，切记ref要全局唯一（类似id）

但是不得不说都已经使用 React 了, 确实就不应该在里面直接操作 DOM

import React, {
    Component
} from 'react';
import ReactDOM from 'react-dom';

class Index extends Component {
    onClick(event) {
        console.log(event.target.value);
        // 第一种方式
        var submitObj = document.getElementById('submit');
        submitObj.style.color = 'green';
        // 第二种方式
        ReactDOM.findDOMNode(submitObj).style.color = 'yellow';
        // 第三种方式
        this.refs.submit.style.color = 'blue';
    }
    render() {
        return ( <
            div >
            <
            input id = 'submit'
            ref = 'submit'
            type = 'button'
            value = 'style'
            onClick = {
                this.onClick.bind(this)
            }
            /> <
            /div>
        )
    }
}
ReactDOM.render( < Index / > , document.getElementById('container'));