如何在 React.js 中获取多个复选框值？

在本文中，我们将学习如何从 React 中的多个复选框中检索值。

当人们想根据自己的选择选择一些选项时，可以看到复选框。在浏览 YouTube 时，您可能会遇到一项调查，该调查由一个问题和几个框组成，您可以根据自己的喜好和经验从中选择一个或多个选项。这些框称为复选框。

在某些应用程序中可能需要创建包含这些复选框的表单。我们需要掌握这些数据才能对其进行处理。例如，如果您访问任何 Pizza 应用程序并且有多个选项可以选择浇头，您将需要为您选择的浇头付费。有必要获取您选择的值，以便可以交付您选择的比萨饼并相应地向您收费。

让我们看看如何使用以下示例确定检查的值。

方法：我们将创建一个简单的表单，要求用户选择他们熟悉的编程语言。在此示例中，我们将在文本框中显示选定的值。

• 创建一个反应应用程序。
• 制作带有复选框的表单。
• 选中多个框。
• 在文本框中显示选中的值。

请按照以下步骤开始：

第 1 步：创建一个项目目录，前往终端，并使用以下命令创建一个名为“form-check”的 React 应用程序：

npx create-react-app form-check

创建表单检查应用程序后，通过键入以下命令切换到新文件夹表单检查：

cd form-check

第 2 步：修改您的项目结构。目录结构目前如下所示：

默认项目结构

我们将修改文件夹并保留此示例所需的文件。现在，确保您的文件结构如下所示：

最终项目结构

第 3 步：在index.html文件中添加代码。

在您的index.html文件中包含以下代码，该文件位于项目目录的公共文件夹中。我们将使用引导程序来构建我们的表单组件。将引导 CDN 导入 index.html，如下所示：

链接：将以下代码放在正文的末尾。

链接：将以下代码放在头部的末尾：

integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm”crossorigin=”anonymous”>

这就是您的index.html的外观：

index.html

  
  
  
  
  
  React App


  
  
  
    
  
  
    
   
   

第 4 步：在App.js文件中制作表单组件。

我们将在App.js文件中创建一个表单组件。用户可以根据自己的喜好从表单中选择多种编程语言。由于我们将根据用户是否选中或取消选中该框来动态修改组件的行为，因此我们需要将此值存储在应用程序中并进行更新。因此，我们将使用 useState 挂钩来管理我们应用的状态并跟踪其变化。我们将从 react 中导入 useState 钩子，如下所示：

import React, { useState } from "react";

然后我们将调用useState()函数。初始状态被传递给 useState() Hook。它返回当前状态和更新它的函数。我们将声明一个名为userinfo的状态变量，并将其设置为空数组语言和响应的对象。语言数组保留检查值，响应数组使用相同的检查值显示在文本框中。我们可以调用setUserInfo来更新我们当前的状态。这将表示为：

const [userinfo, setUserInfo] = useState({ languages:[], response:[] });

复选框的所有输入标签都将具有相同的名称属性，即语言。 我们将为 Value 属性分配实际的语言名称，添加一个事件处理程序onChange ，并定义一个函数handleChange来处理此事件。在这个函数中，我们将传递一个事件对象，该对象由一些描述事件的属性组成。 e.target返回触发事件的元素。 e.target.value返回选中框的值，而e.target.checked确定该框是否被选中并返回一个布尔值。我们将解构 value ，从 e.target 检查为：

const {value ,checked } = e.target;

解构使您能够从对象或数组中解压缩值。这与编写 e.target.value 和 e.target.checked 相同。然后我们将从 userinfo 中获取语言数组。

会有两种情况：

1. 用户勾选框：如果勾选框，ieetarget.checked返回true，那么我们将更新状态并将勾选框的值传递到语言和响应数组中。如果有不止一种语言或选项可用，我们必须使用新选择的选项更新数组，保留之前选择的值。因此，我们将使用Spread运算符，它由一个前面有三个点的数组表示。这会将前一个数组合并到当前数组中。语言数组将以这种方式保留多个值。响应数组将包含与语言数组相同的值。
2. 用户取消选中该框：当用户取消选中该框时，我们需要从数组中删除该值。这可以使用过滤器函数来完成。 filter函数循环遍历数组，并根据我们提供的条件包含或排除元素。所以我们将传递一个带有事件参数的函数。现在，如果选中的事件返回 false，则删除该事件的值。

为了显示检查的值，我们创建了一个textarea元素，该元素从响应数组中获取值。响应数组存储与语言数组相同的检查值。当用户选中该框时，此 textarea 值将使用该复选框值更新并显示在 textarea 中。

在您的App.js文件中编写以下代码以实现此功能。

应用程序.js

import React, { useState } from "react";
import "./App.css";
  
function App() {
  const [userinfo, setUserInfo] = useState({
    languages: [],
    response: [],
  });
  
  const handleChange = (e) => {
    // Destructuring
    const { value, checked } = e.target;
    const { languages } = userinfo;
      
    console.log(`${value} is ${checked}`);
     
    // Case 1 : The user checks the box
    if (checked) {
      setUserInfo({
        languages: [...languages, value],
        response: [...languages, value],
      });
    }
  
    // Case 2  : The user unchecks the box
    else {
      setUserInfo({
        languages: languages.filter((e) => e !== value),
        response: languages.filter((e) => e !== value),
      });
    }
  };
    
  return (
    <>
      

        

          

            Your programming expertise lies in what languages?{" "}
          
  
          

            

              

                

                  
                  
                      Javascript
                  
                
                

                  
                  
                      Python
                  
                
                

                  
                  
                      Java
                  
                
                

                  
                  
                      PHP
                  
                
              
              

                

                  
                  
                      C#
                  
                
                

                  
                  
                      C++
                  
                
                

                  
                  
                      C
                  
                
                

                  
                  
                      Typescript
                  
                
              
            
  
            

              
                You're proficient in the following languages :{" "}
              
              
            
          
        
      
    
  );
}
  
export default App;

第 5 步：现在，让我们为组件设置样式。在App.css文件中编写以下代码。

应用程序.css

.text {
    width: 50%;
    margin: auto;
}
  
.top {
    /* margin: auto; */
    margin-top: 4%;
    width: 50%;
    border: 2px ridge black;
    background-color: #f1f1f1;
}
  
h3 {
    text-align: center;
}
  
.row {
    padding-left: 20%;
}

第 6 步：您的index.js文件应如下所示。 index.js文件作为主要入口点，其中App.js 文件在 DOM 的根 ID 处呈现。

应用程序.js

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

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

npm start 

输出：默认情况下，React 项目将在端口 3000上运行。您可以在浏览器上的localhost:3000访问它。

输出

当一个框被选中时，它的值显示在底部的文本框中，当该框被取消选中时，它的值被删除。