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

【问题标题】：How to click automatically in a button when user coming to page用户进入页面时如何自动单击按钮
【发布时间】：2019-08-10 00:37:05
【问题描述】：

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()

这不起作用。

【问题讨论】：

标签： reactjs button buttonclick

【解决方案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

【讨论】：

当输入类型是文件时，这对我不起作用。我可以通过单击父组件来触发子组件的渲染来使其工作，但随后输入从 DOM 中消失，并且 React 的任何合成事件都不起作用，因为整个表单都消失了

【解决方案2】：

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

第二件事，在 React 中使用真实的 DOM 基本上就是，比方说，反模式。 React 提供了虚拟 DOM 并且可以使用它，所以，我建议你了解一下React ref API。

对于您的情况，您可以使用生命周期 componentDidMount() 方法。当组件完成第一次渲染时，它会被调用（当然是自动的），所以，所有的 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>
     )
  }
}

或者，使用参考

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>
     )
  }
}

【讨论】：

【解决方案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;

【讨论】：

没有。按钮在那里，它应该自动单击按钮。不使用componentdidmount
@soubhagya 好吧，生命周期 componentDidMount 正在被自动调用。因此，如果您在其中触发somebutton.click()，则意味着该按钮将被自动点击
@LevitatorImbalance 没错，最终的动机是触发onClick函数，上面的代码就可以了
输入类型为文件时不会...