reactjs - 加载页面时如何单击按钮做出反应？

Question

加载页面时如何单击按钮做出反应？

页面加载时我需要按下按钮

https://codesandbox.io/s/gifted-poitras-3sknp

import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <button onClick={() => alert("loaded")}>button</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

你在寻找这样的东西。按钮点击发生在页面加载时以及点击按钮时？

class App extends React.Component {
  constructor(){
    super();
    this.buttonClicked = this.buttonClicked.bind(this);
  }
  
  componentDidMount(){
    this.buttonClicked();
  }
  
  buttonClicked(){
    alert("I'm Clicked");
  }

  render() {
    return (
      <button onClick={() => this.buttonClicked()}>
        button
      </button>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

用于useRef保存对button元素的引用，并useEffect用于检测组件何时安装

import React, { useEffect, useRef } from "react";

function App() {
  const buttonRef = useRef(null);

  useEffect(() => {
    buttonRef.current.click();
  }, []);

  return (
    <div className="App">
      <button ref={buttonRef} onClick={() => alert("button")}>
        button
      </button>
    </div>
  );
}

Answer 3

来自React 的 Hooks API 参考

传递给 useEffect 的函数将在渲染提交到屏幕后运行。

因此，您始终可以考虑使用 useEffect 在页面呈现后立即运行您想要的任何副作用。确保[]作为第二个参数传递，以确保箭头函数只会被调用一次。

这是使用 useEffect 钩子 with document.getElementById(id)而不是的替代示例，useRef因为已经提到过

使用它仍然更好，useRef特别是如果该组件可以在同一页面中重用。

import React, {useEffect} from "react";

useEffect(() => {
  document.getElementById("btn").click();
},[]);

function App() {
  return (
    <div className="App">
      <button id="btn" onClick={() => alert("loaded")}>button</button>
    </div>
  );
}