如何在用户访问页面时自动单击按钮

Question

import React from "react";

checkClick = () => {
  console.log("clicked");
};

class Test extends React.Component {
  render() {
    return (
      <div>
        <button id="button" onClick={this.checkClick}>
          click
        </button>
      </div>
    );
  }
}

export default Test;

如何在用户访问页面时自动点击按钮？

这里我想自动点击上面的按钮。

我尝试过：

document.getElementById("button").click()

这是行不通的。

Answer 1

您可以使用 ref 来为您提供 dom 元素的实例，您可以在其中调用该click()方法。

如果您不熟悉参考文献，您可以在这里阅读有关它们的所有内容：https ://reactjs.org/docs/refs-and-the-dom.html

import React, { Component } from 'react'


class Test extends Component {
  constructor(props) {
    super(props)

    this.button = React.createRef()
  }

  componentDidMount() {
    this.button.current.click()
  }

  checkClick() {
    console.log('clicked')
  }

  render() {
    return (
      <div>
        <button ref={this.button} onClick={this.checkClick}>Click me!</button>
      </div>
    )
  }
}


export default Test