React onClick 函数在渲染时触发

jsx
import React, { useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    
      
点击次数：{count}
      点击我
    
  );
}
export default App;

` 元素会显示当前的点击次数，而 `` 元素通过 `onClick` 属性绑定了 `handleClick` 函数，以便在用户点击按钮时触发该函数。

通过这种方式，我们可以很方便地实现一个计数器应用程序，每次用户点击按钮时，计数器的值都会增加。

更多 onClick 函数的应用

除了上述示例中的计数器应用，onClick 函数还可以用于实现各种其他交互操作。例如，可以通过 onClick 函数来发送网络请求获取数据，然后根据返回的数据更新组件的状态，实现动态内容的加载。

下面是一个示例，展示了如何使用 onClick 函数来获取随机图片并更新组件的状态：

jsx
import React, { useState } from "react";
function App() {
  const [image, setImage] = useState("");
  const handleClick = () => {
    fetch("https://source.unsplash.com/random")
      .then((response) => response.url)
      .then((url) => setImage(url));
  };
  return (
    
      
随机图片
      

获取图片

{image && }