react怎么实现checkbox

实现 React Checkbox 的基本方法

在 React 中实现复选框可以通过原生 HTML 的 input 元素结合 React 的状态管理来完成。以下是一个基础实现示例：

import React, { useState } from 'react';

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

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

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

处理多个复选框

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

function MultipleCheckboxes() {
  const [checkedItems, setCheckedItems] = useState({
    item1: false,
    item2: false,
    item3: false
  });

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

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

使用第三方库

对于更复杂的复选框需求，可以考虑使用第三方库如 material-ui 或 antd：

import { Checkbox } from 'antd';

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

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    >
      Checkbox
    </Checkbox>
  );
}

自定义样式复选框

如果需要自定义复选框样式，可以隐藏原生输入框并使用 CSS 控制：

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

  return (
    <label className="custom-checkbox">
      <input
        type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
        className="hidden-input"
      />
      <span className="checkmark"></span>
      Custom Checkbox
    </label>
  );
}

对应的 CSS 可能如下：

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

.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #eee;
  margin-right: 8px;
}

.hidden-input:checked + .checkmark {
  background-color: #2196F3;
}

受控与非受控组件

React 中的复选框可以是受控或非受控组件。受控组件通过 checked 属性和 onChange 处理程序完全控制状态，而非受控组件则依赖 DOM 自身管理状态：

// 受控组件
<input type="checkbox" checked={isChecked} onChange={handleChange} />

// 非受控组件
<input type="checkbox" defaultChecked={initialState} />