如何在 React 中访问 DOM 元素？

在 React 中，我们可以使用 Refs 访问 DOM 元素。 Refs 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方法。

创建 Refs：使用 React.createRef() 创建 Refs 并通过 ref 属性附加到 React 元素。

class App extends React.Component {
constructor(props) {
  super(props);
  //creating ref
  this.myRef= React.createRef();
}
render() {
//assigning ref
  return (
  

  
  
  )
}
}

访问 Refs：当我们将 ref 分配给渲染中的元素时，我们可以使用 ref 的 current 属性访问该元素。

const element = this.myRef.current;

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

Filename- App.js：打开位于 src 文件夹中的App.js文件，将其编辑为：

Javascript

import React from 'react'
  
class App extends React.Component {
  
    constructor(props) {
        super(props);
         
        this.myRef = React.createRef();
      }
       
    handleClick = () => {
  
          
        this.myRef.current.value = "you clicked on button";
    }
    
    render() {
      return (
        

        
           click me 
        
      );
    }
  }
  
  export default App;

输出：