react两排复选框如何设定

实现两排复选框的基本方法

在React中创建两排复选框可以通过多种方式实现，关键在于布局和状态管理。使用CSS Grid或Flexbox进行布局是最常见的解决方案。

import React, { useState } from 'react';

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

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

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
      {Object.keys(checkedItems).map((item) => (
        <label key={item}>
          <input
            type="checkbox"
            name={item}
            checked={checkedItems[item]}
            onChange={handleChange}
          />
          {item}
        </label>
      ))}
    </div>
  );
}

使用Flexbox布局

Flexbox提供了更灵活的布局选项，特别适合需要响应式设计的场景。

<div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
  <label style={{ flex: '0 0 45%' }}>
    <input type="checkbox" name="item1" />
    Item 1
  </label>
  <label style={{ flex: '0 0 45%' }}>
    <input type="checkbox" name="item2" />
    Item 2
  </label>
  <label style={{ flex: '0 0 45%' }}>
    <input type="checkbox" name="item3" />
    Item 3
  </label>
  <label style={{ flex: '0 0 45%' }}>
    <input type="checkbox" name="item4" />
    Item 4
  </label>
</div>

动态生成复选框

当需要从API或动态数据生成复选框时，可以结合数组映射和状态管理。

const items = [
  { id: 1, label: 'Option 1' },
  { id: 2, label: 'Option 2' },
  { id: 3, label: 'Option 3' },
  { id: 4, label: 'Option 4' }
];

function DynamicCheckboxes() {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleCheckboxChange = (itemId) => {
    setSelectedItems(prev => 
      prev.includes(itemId) 
        ? prev.filter(id => id !== itemId) 
        : [...prev, itemId]
    );
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
      {items.map(item => (
        <label key={item.id}>
          <input
            type="checkbox"
            checked={selectedItems.includes(item.id)}
            onChange={() => handleCheckboxChange(item.id)}
          />
          {item.label}
        </label>
      ))}
    </div>
  );
}

使用组件库实现

如果项目中使用Material-UI或Ant Design等UI库，可以更快速地实现美观的复选框布局。

Material-UI示例：

import { Checkbox, FormControlLabel, Grid } from '@material-ui/core';

<Grid container spacing={2}>
  <Grid item xs={6}>
    <FormControlLabel control={<Checkbox name="item1" />} label="Item 1" />
  </Grid>
  <Grid item xs={6}>
    <FormControlLabel control={<Checkbox name="item2" />} label="Item 2" />
  </Grid>
  <Grid item xs={6}>
    <FormControlLabel control={<Checkbox name="item3" />} label="Item 3" />
  </Grid>
  <Grid item xs={6}>
    <FormControlLabel control={<Checkbox name="item4" />} label="Item 4" />
  </Grid>
</Grid>

响应式设计考虑

为确保在不同屏幕尺寸下都能保持两排布局，可以添加媒体查询：

.checkbox-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 600px) {
  .checkbox-container {
    grid-template-columns: 1fr;
  }
}