React 多选框

17 Mar 2025 | 阅读 2 分钟

在本节中，我们将学习在 React 中使用多个复选框。我们将看到使用 ReachJS 获取所有已选中的值。在下面的示例中，我们将展示如何从 React 多个复选框中获取值。

有时我们必须根据用户需求设置多个复选框。我们可以设置选项来选择水果，用户可以根据自己的选择来选择它们。如果用户想从列表中选择多个选项或多个选项，他们也可以这样做。在这种情况下，我们需要在 ReactJS 中放置多个复选框。为此，以下示例将帮助我们理解在 React 中使用多个复选框。

在下面的示例中，我们将获取一个类别数组，其中将包含 React、Laravel、PHP、Angular 等。我们将通过使用 map 循环显示动态的多个复选框。我们将创建一个名为“checkedItems”的变量来存储用户选择的复选框的信息。当用户提交表单时，他们将获得所有选中的复选框的值。执行此操作的示例代码如下

示例代码

import React, { Component } from 'react';
import { render } from 'react-dom';
       
class App extends Component {
  constructor() {
    super();
    this.state = {
      categories: [
        {id: 1, value: "Angular"},
        {id: 2, value: "React"},
        {id: 3, value: "PHP"},
        {id: 4, value: "Laravel"}
      ],
      checkedItems: new Map()
    };
  
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
     
  handleChange(event) {
        var isChecked = event.target.checked;
        var item = event.target.value;
         
        this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
  }
     
  handleSubmit(event) {
    console.log(this.state);
    event.preventDefault();
  }
     
  render() {
    return (
      <div>
        <h1> Examples of Multiple Checkbox in React </h1>
  
        <form onSubmit={this.handleSubmit}>
           
          {
            this.state.categories.map(item => (
              <li>
                <label>
                  <input
                    type="checkbox"
                    value={item.id}
                    onChange={this.handleChange}
                  /> {item.value}
                </label>
              </li>
            ))
          }
           
          <br/>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
   
render(<App />, document.getElementById('root'));

当我们执行上面的代码时，我们将得到以下输出

下一个主题React-icons

← 上一步下一步 →

React 多选框

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 多选框

相关帖子

组件 React

从零到英雄的完整 React JS 让你被录用

React vs. Svelte

ReactJS 编译器

10 个著名的 React 应用程序

React 中的按钮

React 中的条件 CSS

React DevTools

ReactJS useEffect Hook

ReactJS 中的 Const

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器