reactjs - 如何在用户进入页面时自动点击按钮

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() 方法。

如果您不熟悉 refs，您可以在这里阅读所有相关信息: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