如何使用功能组件在 ReactJS 中通过 onClick 事件更改状态？

在现代应用程序中，编写函数式组件已成为编写 React 组件的标准方式，因为它们只是接受 props 并返回 React 元素的 JavaScript 函数。

只能在功能组件中使用 Hooks，与类组件相比，这是一种更容易管理状态的方法。使用 Hooks，状态对象彼此完全独立，因此您可以拥有任意数量的状态对象。在单页应用程序中，useState 挂钩是通过单击更改状态而不重新加载整个页面的最佳方式。

React useState hook： useState hook 将初始状态作为参数，并返回一个带有当前状态值（不一定是初始状态）的变量和另一个更新该值的函数。

示例：演示单击状态更改的程序。在此示例中，我们有两个按钮描述和评论，我们希望在单击按钮时更改内容。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app projectname

第 2 步：创建项目文件夹（即项目名称）后，使用以下命令移动到该文件夹。

cd projectname

项目结构：它看起来像这样。

第 3 步：要使用 useState，您需要从 react 中导入 useState，如下所示：

import { useState } from "react";
const [description, setDescription] = useState(true);
const [reviews, setReviews] = useState(false);

设置点击元素的点击事件处理函数，导致状态改变。在ComponentOne.js文件中编写以下代码。

Javascript

import { useState } from "react";
function ComponentOne() {
    const [description, setDescription] = useState(true);
    const [reviews, setReviews] = useState(false);
    const descriptionHandler = () => {
        setDescription(true);
        setReviews(false);
    };
    const reviewsHandler = () => {
        setDescription(false);
        setReviews(true);
    };
    return (
        

            
                Descriptions
            
                Reviews
            {description && (
                

                    This is a descriptive button
                    
Descriptions:
                

            )}
            {reviews && (
                

                    This is a Review button
                    
Reviews:
                

            )}
        
    );
}
  
export default ComponentOne;

第 4 步：在这段代码中，当我们单击一个按钮时，React onClick 事件处理程序使您能够调用一个函数并触发一个动作，在我们的例子中假设当单击评论按钮时它会调用一个函数reviewsHandler，并且在这个函数内部的内容/state 使用 useState 挂钩进行更改。

Javascript

import ComponentOne from "./components/ComponentOne";
  
function App() {
    return (
      

       
      
    );
}
  
export default App;

第 5 步：在index.js文件中编写以下代码。

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
  
ReactDOM.render(,document.getElementById('root'));

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：现在，打开 URL http://localhost:3000/，您将看到以下输出。

结论：功能组件不是类 Component，而是一种简单且可扩展的方式，可以在 ReactJS 中更改单击状态，而无需使用 useState 钩子重新加载整个页面。