Как автоматически нажимать на кнопку, когда пользователь заходит на страницу - PullRequest
Новая
       30

Как автоматически нажимать на кнопку, когда пользователь заходит на страницу

1 голос
/ 19 марта 2019 
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()

, который не работает.

Ответы [ 3 ]

2 голосов
/ 19 марта 2019

Вы можете использовать ссылку, которая дает вам экземпляр элемента dom, где вы можете вызвать метод 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
1 голос
/ 19 марта 2019

Прежде всего, я не рекомендую вам создавать функции вне класса компонента React.В вашем случае вы не можете использовать его как this.checkClick, потому что функция checkClick объявлена ​​вне вашего компонента React.

Во-вторых, работа с реальным DOM внутри React в основном, давайтескажем, антипаттерн.React предоставляет виртуальный DOM и работает с ним, поэтому я рекомендую вам ознакомиться с React ref API .

. В вашем случае вы можете использовать метод жизненного цикла componentDidMount().Он вызывается (наверняка, АВТОМАТИЧЕСКИ), когда компонент завершил свою первую визуализацию, поэтому все ссылки здесь уже доступны, и все дочерние элементы смонтированы в beind и присутствуют в 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>
     )
  }
}
0 голосов
/ 19 марта 2019

Используйте componentDidMount для этого, 

import React from 'react';


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


export default Test;
...