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

您可以使用给您提供dom元素实例的ref，您可以在其中调用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

Answer 2

首先，我不建议您在React组件类之外创建函数。对于您而言，您不能像this.checkClick那样使用它，因为checkClick函数是在React组件外部声明的。

第二件事，在React内部使用真正的DOM基本上就是反模式。 React提供了虚拟DOM并可以使用它，因此，我建议您学习React ref API。

对于您的情况，可以使用生命周期componentDidMount()方法。当组件完成其第一个渲染时，它被称为（肯定是自动的），因此，这里所有的refs都已经可用，并且所有子元素都被indind安装并出现在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>
     )
  }
}

或使用参考

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 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;

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

3 个答案: