react如何获取某个按钮

获取按钮的方法

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

使用ref

import { useRef } from 'react';

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

  const handleClick = () => {
    console.log(buttonRef.current); // 访问按钮DOM元素
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Click me
    </button>
  );
}

通过事件对象获取

function MyComponent() {
  const handleClick = (event) => {
    console.log(event.target); // 获取触发事件的按钮元素
  };

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

使用document.querySelector

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

  return (
    <button className="my-button" onClick={handleClick}>
      Click me
    </button>
  );
}

通过父组件传递ref

const Button = React.forwardRef((props, ref) => (
  <button ref={ref} {...props}>
    {props.children}
  </button>
));

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

  useEffect(() => {
    console.log(buttonRef.current);
  }, []);

  return <Button ref={buttonRef}>Click me</Button>;
}

注意事项

• 使用ref是React推荐的方式，避免直接操作DOM
• 在函数组件中必须使用useRef Hook
• 类组件中可以使用createRef
• 通过事件对象获取的方式只在事件处理函数中有效