react如何选择码数
React 选择码数的实现方法
在 React 中实现码数选择功能，可以通过多种方式完成，例如使用下拉选择框、单选按钮组或自定义组件。以下是几种常见的实现方法：
使用下拉选择框（Select）
通过 HTML 的 <select> 元素结合 React 的状态管理实现码数选择：
import { useState } from 'react';
function SizeSelector() {
const [selectedSize, setSelectedSize] = useState('');
const sizes = ['S', 'M', 'L', 'XL', 'XXL'];
return (
<div>
<label htmlFor="size-select">选择码数：</label>
<select
id="size-select"
value={selectedSize}
onChange={(e) => setSelectedSize(e.target.value)}
>
<option value="">请选择</option>
{sizes.map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
{selectedSize && <p>已选择：{selectedSize}</p>}
</div>
);
}使用单选按钮组（Radio Buttons）
通过单选按钮组提供直观的码数选择：
import { useState } from 'react';
function SizeSelector() {
const [selectedSize, setSelectedSize] = useState('');
const sizes = ['S', 'M', 'L', 'XL', 'XXL'];
return (
<div>
<p>选择码数：</p>
{sizes.map((size) => (
<label key={size}>
<input
type="radio"
name="size"
value={size}
checked={selectedSize === size}
onChange={() => setSelectedSize(size)}
/>
{size}
</label>
))}
{selectedSize && <p>已选择：{selectedSize}</p>}
</div>
);
}使用第三方 UI 库
若项目中使用 Material-UI 或 Ant Design 等 UI 库，可直接调用其封装好的选择组件：
import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';
import { useState } from 'react';
function SizeSelector() {
const [selectedSize, setSelectedSize] = useState('');
const sizes = ['S', 'M', 'L', 'XL', 'XXL'];
return (
<FormControl fullWidth>
<InputLabel id="size-select-label">码数</InputLabel>
<Select
labelId="size-select-label"
value={selectedSize}
label="码数"
onChange={(e) => setSelectedSize(e.target.value)}
>
{sizes.map((size) => (
<MenuItem key={size} value={size}>
{size}
</MenuItem>
))}
</Select>
</FormControl>
);
}动态加载码数数据
若码数数据需从 API 获取，可结合 useEffect 实现异步加载：
import { useState, useEffect } from 'react';
function SizeSelector() {
const [sizes, setSizes] = useState([]);
const [selectedSize, setSelectedSize] = useState('');
useEffect(() => {
fetch('/api/sizes')
.then((res) => res.json())
.then((data) => setSizes(data));
}, []);
return (
<div>
<label htmlFor="size-select">选择码数：</label>
<select
id="size-select"
value={selectedSize}
onChange={(e) => setSelectedSize(e.target.value)}
>
<option value="">请选择</option>
{sizes.map((size) => (
<option key={size.id} value={size.value}>
{size.label}
</option>
))}
</select>
</div>
);
}注意事项
- 表单提交时需验证是否已选择码数。
- 移动端优先考虑使用触摸友好的组件（如滑动选择器）。
- 国际化场景需将码数标签（如 S/M/L）转换为多语言支持。
以上方法可根据具体需求灵活调整或组合使用。
