react入门（五）——ref

怎么获得dom？

  在传统的js里面，我们可以通过document获取，这也是最常用的。那么我们如何在react中获得dom节点呢，难道还要用document获取吗？答案当然是否定的。

在react中怎么获取dom？

 在react中，我们有一个专门的语法，也可以说是标签的一个属性ref，我们可以通过他获取这个dom节点。

怎么通过ref获取dom?

<script type="text/babel">
    class Component extends React.Component {
        render() {
            return (
                <div>
                    <input type="text" ref="firstInput" className="firstInput"/>
                    <input type="text" ref={input => this.input = input} className="input"/>
                    <button onClick={() => {
                        this.accessRef()
                    }}>获取ref
                    </button>
                </div>
            )
        }
		//获取dom节点的ref有两种方式，第一种是直接字符串形式即 ref="xxx"
		//第二种获取的方式是我比较推荐的，即ref=(el=> this.xx = el)，el是形参，即代表dom对象
       accessRef() {
            const {firstInput} = this.refs;
            const input = this.input;
            console.log(firstInput, input)
        }
    }

    ReactDOM.render(<Component/>, document.getElementById('test'))

</script>