如何在React JS中编程式模拟按钮点击？

针对你给出的按钮组件，有两种常用方式实现编程式触发点击：

1. 直接调用事件处理函数（推荐） #

既然按钮的onClick绑定了loaddetails函数，最符合React设计理念的方式就是直接调用这个函数，无需操作DOM元素。

比如在组件挂载完成后自动执行：

// 函数组件示例
import { useEffect } from 'react';

function YourComponent() {
  const loaddetails = () => {
    // 这里是你的点击逻辑
    console.log('Details按钮被触发');
  };

  // 组件挂载后自动触发
  useEffect(() => {
    loaddetails();
  }, []);

  return (
    <button className="btn btn-primary col-md-2" onClick={loaddetails}>
      Details
    </button>
  );
}

这种方式避免了直接操作DOM，完全遵循React的声明式编程模式，是首选方案。

2. 通过Ref获取DOM元素并触发原生点击事件 #

如果必须模拟真实的DOM点击行为（比如按钮是第三方UI组件，需要触发其内部的原生事件逻辑），可以使用React的Ref来获取按钮元素，再调用原生的click()方法。

函数组件中使用useRef： #

import { useRef, useEffect } from 'react';

function YourComponent() {
  const buttonRef = useRef(null);
  const loaddetails = () => {
    console.log('Details按钮被触发');
  };

  useEffect(() => {
    // 可选链操作避免null报错
    buttonRef.current?.click();
  }, []);

  return (
    <button
      ref={buttonRef}
      className="btn btn-primary col-md-2"
      onClick={loaddetails}
    >
      Details
    </button>
  );
}

类组件中使用createRef： #

import React, { Component, createRef } from 'react';

class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.buttonRef = createRef();
  }

  loaddetails = () => {
    console.log('Details按钮被触发');
  };

  componentDidMount() {
    this.buttonRef.current?.click();
  }

  render() {
    return (
      <button
        ref={this.buttonRef}
        className="btn btn-primary col-md-2"
        onClick={this.loaddetails}
      >
        Details
      </button>
    );
  }
}

内容的提问来源于stack exchange，提问作者Luci