如何在 ReactJS 中创建响应式赞按钮？

在 ReactJS 中创建响应式赞按钮需要使用 useState 钩子函数和 onClick 事件。下面我们将详细介绍如何在 ReactJS 中创建响应式赞按钮。

步骤 1：导入必要的模块

我们需要导入 React 模块和 useState 钩子函数：

import React, { useState } from 'react';

步骤 2：创建组件

创建一个组件 LikeButton：

function LikeButton() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>赞 {count}</button>
    </div>
  );
}

在上面的代码中，我们使用 useState 钩子函数来定义 count 变量，并将其初始化为 0。通过调用 setCount 函数，我们可以改变变量的值。在按钮的 onClick 事件中，我们调用 setCount 函数并将当前值加一，从而实现了点击按钮自增计数器。

步骤 3：渲染组件

将组件渲染到页面中：

function App() {
  return (
    <div>
      <LikeButton />
    </div>
  );
}

完整代码

import React, { useState } from 'react';

function LikeButton() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>赞 {count}</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <LikeButton />
    </div>
  );
}

export default App;

这就是如何在 ReactJS 中创建响应式赞按钮的完整代码。