当前位置：首页 > React

react 实现checkbox

2026-01-26 14:58:09React

实现基础 Checkbox 组件

在 React 中创建基础的 Checkbox 组件需要使用 input 元素并绑定状态管理。以下是核心实现方式：

import { useState } from 'react';

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleChange}
      />
      Check me
    </label>
  );
}

处理多选框组

当需要管理多个复选框时，可以使用对象或数组存储状态：

function CheckboxGroup() {
  const [selected, setSelected] = useState({
    apple: false,
    banana: false,
    orange: false
  });

  const handleChange = (event) => {
    const { name, checked } = event.target;
    setSelected(prev => ({
      ...prev,
      [name]: checked
    }));
  };

  return (
    <div>
      {Object.keys(selected).map((fruit) => (
        <label key={fruit}>
          <input
            type="checkbox"
            name={fruit}
            checked={selected[fruit]}
            onChange={handleChange}
          />
          {fruit}
        </label>
      ))}
    </div>
  );
}

使用第三方库

对于更复杂的需求，可以考虑使用现成的 UI 库：

# 安装 Material-UI
npm install @mui/material @emotion/react @emotion/styled

import { Checkbox, FormControlLabel } from '@mui/material';

function MaterialCheckbox() {
  const [checked, setChecked] = useState(false);

  return (
    <FormControlLabel
      control={
        <Checkbox
          checked={checked}
          onChange={(e) => setChecked(e.target.checked)}
        />
      }
      label="Material UI Checkbox"
    />
  );
}

自定义样式 Checkbox

创建自定义样式的 Checkbox 组件可以通过隐藏原生输入元素并设计替代视觉元素实现：

react 实现checkbox

function CustomCheckbox({ label }) {
  const [checked, setChecked] = useState(false);

  return (
    <label className="custom-checkbox">
      <input
        type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
        className="hidden-input"
      />
      <span className={`checkmark ${checked ? 'checked' : ''}`} />
      {label}
    </label>
  );
}

对应 CSS 样式：

.hidden-input {
  position: absolute;
  opacity: 0;
}

.custom-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  margin-right: 8px;
  transition: all 0.3s;
}

.checkmark.checked {
  background-color: #2196F3;
  border-color: #2196F3;
}

受控与非受控组件

React 中 Checkbox 可以作为受控或非受控组件使用：

react 实现checkbox

受控组件（推荐）：

<input type="checkbox" checked={isChecked} onChange={handleChange} />

非受控组件：

<input type="checkbox" defaultChecked={false} ref={checkboxRef} />

表单集成

将 Checkbox 集成到表单中时，可以结合表单管理库如 Formik：

import { useFormik } from 'formik';

function FormWithCheckbox() {
  const formik = useFormik({
    initialValues: { agree: false },
    onSubmit: values => console.log(values)
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label>
        <input
          type="checkbox"
          name="agree"
          checked={formik.values.agree}
          onChange={formik.handleChange}
        />
        I agree to terms
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}