react如何选择码数
React 组件中如何选择尺寸（码数）
在 React 应用中处理尺寸选择（如服装码数）通常需要结合状态管理、用户交互和样式控制。以下是实现方法：
状态管理
使用 useState 钩子存储当前选中的码数，默认值可设为常见的中等尺寸（如 "M"）：
const [selectedSize, setSelectedSize] = useState('M');渲染选择器 通过数组映射生成可选的码数按钮，动态添加选中状态的类名：
const sizes = ['XS', 'S', 'M', 'L', 'XL'];
<div className="size-selector">
{sizes.map(size => (
<button
key={size}
className={`size-btn ${selectedSize === size ? 'active' : ''}`}
onClick={() => setSelectedSize(size)}
>
{size}
</button>
))}
</div>样式控制 使用 CSS 高亮当前选中状态，增强用户体验：
.size-btn {
padding: 8px 12px;
margin: 0 5px;
border: 1px solid #ddd;
background: white;
}
.size-btn.active {
border-color: #000;
background: #f0f0f0;
}数据联动 将选中码数与表单提交或商品数据关联：
const handleSubmit = () => {
console.log('Selected size:', selectedSize);
// 提交到API或加入购物车逻辑
};缺货处理 当某些码数库存不足时，可禁用对应选项：
const outOfStock = ['XS', 'XL'];
<button
...
disabled={outOfStock.includes(size)}
style={{ opacity: outOfStock.includes(size) ? 0.5 : 1 }}
>
{size}{outOfStock.includes(size) && ' (缺货)'}
</button>高级实现方案
尺寸推荐系统 根据用户历史数据或身材参数自动推荐码数：
useEffect(() => {
if (user.preferredSize) {
setSelectedSize(user.preferredSize);
}
}, [user]);本地存储记忆
使用 localStorage 记住用户上次选择的码数：
useEffect(() => {
const savedSize = localStorage.getItem('preferredSize');
if (savedSize) setSelectedSize(savedSize);
}, []);
const handleSizeChange = (size) => {
setSelectedSize(size);
localStorage.setItem('preferredSize', size);
};响应式布局 针对移动设备优化显示方式：
@media (max-width: 768px) {
.size-btn {
padding: 6px 8px;
margin: 2px;
}
}以上方案可根据具体业务需求组合使用，核心在于保持状态同步和提供清晰的视觉反馈。对于电商类应用，建议增加尺寸对照表和测量指南辅助用户决策。
