当前位置：首页 > React

react如何获取某个按钮

2026-03-10 18:34:44React

在React中获取某个按钮的引用可以通过以下几种方式实现：

使用ref属性（推荐方式）

通过useRef钩子创建引用，并将其绑定到按钮的ref属性上：

react如何获取某个按钮

import { useRef } from 'react';

function MyComponent() {
  const buttonRef = useRef(null);

  const handleClick = () => {
    console.log(buttonRef.current); // 获取按钮DOM节点
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      点击按钮
    </button>
  );
}

通过事件对象获取

在事件处理函数中，可以通过event.target直接访问触发事件的按钮：

react如何获取某个按钮

function MyComponent() {
  const handleClick = (event) => {
    console.log(event.target); // 直接获取按钮元素
  };

  return (
    <button onClick={handleClick}>
      点击按钮
    </button>
  );
}

使用document.querySelector

通过DOM选择器直接查找按钮元素（慎用，可能违反React设计原则）：

function MyComponent() {
  const handleClick = () => {
    const button = document.querySelector('#myButton');
    console.log(button);
  };

  return (
    <button id="myButton" onClick={handleClick}>
      点击按钮
    </button>
  );
}

类组件中的字符串ref（旧版API）

在类组件中可以使用字符串ref（React已不推荐此写法）：

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this.refs.myButton);
  };

  render() {
    return (
      <button ref="myButton" onClick={this.handleClick}>
        点击按钮
      </button>
    );
  }
}

最佳实践是优先使用useRef钩子或事件对象的方式，它们更符合React的设计理念且性能更好。直接操作DOM的方法应尽量避免使用。