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

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

首先，我不建议您在React组件类之外创建函数。在你的情况下，你无法像this.checkClick那样使用它，因为checkClick函数是在你的React组件之外声明的。

第二件事，在React中使用真正的DOM基本上就是说反模式。 React提供虚拟DOM并与之一起使用，因此，我建议您了解React ref API。

对于您的情况，您可以使用生命周期componentDidMount()方法。当组件完成其第一次渲染时，它被称为（AUTOMATICALLY，当然），因此，所有refs在这里已经可用，并且所有子元素都被安装并存在于DOM中。

import React from "react"

export default class Test extends React.Component {
  componentDidMount() {
    document.getElementById("button").click()
  }

  checkClick() {
    console.log("clicked!")
  }

  render() {
     return (
       <div>
         <button id="button" onClick={this.checkClick}>click</button>  
       </div>
     )
  }
}

或者，使用refs

import React from "react"

export default class Test extends React.Component {
  componentDidMount() {
    this.button.click()
  }

  checkClick() {
    console.log("clicked!")
  }

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

Answer 2

您可以使用一个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

Answer 3

使用componentDidMount，

import React from 'react';


class Test extends React.Component {
    componentDidMount(){
       this.checkClick();
    }
     checkClick () {
         console.log("clicked");
     }
    render() {
        return (
            <div>  
            </div>
        )
    }
}


export default Test;