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

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

为此使用componentDidMount，

import React from 'react';


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


export default Test;

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

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

第二件事，在 React 内部使用真正的 DOM 基本上可以说是反模式。 React 提供了 virtual DOM 并与之一起工作，因此，我建议您了解 React ref API.

对于您的情况，您可以使用生命周期 componentDidMount() 方法。当组件完成第一次渲染时，它被调用（当然是自动的），所以，所有的引用都在这里可用，所有的子元素都被挂载并出现在 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>
     )
  }
}

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

How to click automatically in a button when user coming to page

button

buttonclick

reactjs