当前位置：首页 > React

react如何一个checkbox组件

2026-01-25 21:05:41React

React 实现 Checkbox 组件

在 React 中创建一个自定义 Checkbox 组件可以通过多种方式实现，以下是常见的几种方法：

使用受控组件方式

通过 useState 管理 Checkbox 的状态，适合需要与表单其他部分交互的场景。

react如何一个checkbox组件

import React, { useState } from 'react';

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

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

  return (
    <label>
      <input 
        type="checkbox" 
        checked={isChecked} 
        onChange={handleChange} 
      />
      {isChecked ? 'Checked' : 'Unchecked'}
    </label>
  );
}

export default Checkbox;

支持自定义样式

通过隐藏原生 <input> 并用 <span> 模拟视觉样式，实现高度定制化。

react如何一个checkbox组件

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

  return (
    <label style={{ display: 'flex', alignItems: 'center' }}>
      <div style={{
        width: 20,
        height: 20,
        border: '2px solid #666',
        borderRadius: 4,
        marginRight: 8,
        background: checked ? '#4CAF50' : 'transparent',
        position: 'relative'
      }}>
        <input 
          type="checkbox"
          checked={checked}
          onChange={() => setChecked(!checked)}
          style={{
            opacity: 0,
            position: 'absolute',
            width: '100%',
            height: '100%'
          }}
        />
        {checked && (
          <span style={{
            position: 'absolute',
            left: 6,
            top: 2,
            width: 5,
            height: 10,
            border: 'solid white',
            borderWidth: '0 2px 2px 0',
            transform: 'rotate(45deg)'
          }} />
        )}
      </div>
      {label}
    </label>
  );
}

封装为可复用组件

通过 props 接收外部状态管理，适用于复杂表单场景。

function ControlledCheckbox({ checked, onChange, label, id }) {
  return (
    <label htmlFor={id}>
      <input
        id={id}
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
      />
      {label}
    </label>
  );
}

// 使用示例
function ParentComponent() {
  const [agreement, setAgreement] = useState(false);

  return (
    <ControlledCheckbox
      checked={agreement}
      onChange={setAgreement}
      label="I agree to terms"
      id="terms-checkbox"
    />
  );
}

添加 TypeScript 类型支持

为组件添加类型定义，提升代码可靠性。

interface CheckboxProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  label: string;
  disabled?: boolean;
}

function TypedCheckbox({ checked, onChange, label, disabled }: CheckboxProps) {
  return (
    <label style={{ opacity: disabled ? 0.6 : 1 }}>
      <input
        type="checkbox"
        checked={checked}
        onChange={() => !disabled && onChange(!checked)}
        disabled={disabled}
      />
      {label}
    </label>
  );
}