React中获取DOM元素

1. 前序

        虽然说我们在React或者vue中可以通过事件来获取到对应的event，从中获取到其中对应的方法。但是往往我们在操作数据的时候，不是在对应获取DOM元素时操作。这时候就需要我们获取到装有数据的DOM从而来进行操作。

2. 获取DOM元素

        JS中获取DOM元素的方法会有很多。但这里讲解的是从ref的角度获取对应的元素

1. 我们可以通过在ref中直接绑定对应字符串来获取对应的DOM元素
2. 我们可以在待获取的DOM元素上直接绑定回调函数，从而在组件实例上获取对应的DOM元素
3. 我们可以通过createRef()来在组件组件实例上创建一个DOM仓库，并将其放在对应的DOM元素上获取元素。

3.代码示例 

        

    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <!-- react-dom -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <!-- 支持JSX -->
    <script crossorigin src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
    <script type='text/babel'>
        class TableForm extends React.Component{
            input3 = React.createRef()

            showInfo = () =>{
                console.log(this.refs.input1)
                console.log(this.input2)
                console.log(this.input3)
            }
            render() {
                return (
                    <div>
                    <input ref='input1' type="text"/>&nbsp;
                    <input ref={(currentNode)=>{this.input2 = currentNode}} type="text"/>&nbsp;
                    <input ref={this.input3} type="text"/>&nbsp;
                    <button onClick={this.showInfo}>点我展示案例</button>   
                    </div>
                )
            }
        }
        // 第一种和vue一样，我们根据ref后面绑定字符串的形式来获取DOM元素，从而获取其中的数值。让后在绑定的元素里面获取对应的DOM来操作
        // 第二种就是我们在定义ref的时候写成一个回调函数的形式。该函数的接收参数是我们所在ref外最临近的一个DOM元素
        // 第三种就是通过createRef的形式。在class中直接写明要创建的类，让后将创建的类直接放在我们需要的DOM元素上。但是我们获取的时候需要current来获取
        ReactDOM.render(<TableForm/>,document.getElementById('root'))

4.总结

        其实其中的三种方法，在开发的时候常用第二种。因为第一种字符串形式可能会在未来的版本中被React所抛弃。第三种方法时每次我们所创建ref时都要引入构建器比较麻烦。因此在开发过程中通过使用第二种方法来获取ref。但是在项目组中也要尽力避免过多的使用ref。