当前位置：首页 > React

react如何选择码数

2026-01-15 11:20:00React

React 中选择码数的实现方法

在 React 中实现选择码数（如鞋码、服装尺码等）的功能，通常需要结合表单控件和状态管理。以下是几种常见的实现方式：

使用下拉选择框（Select） 通过 <select> 和 <option> 元素创建码数选择器，结合 React 的状态管理（如 useState）来跟踪用户选择：

import { useState } from 'react';

function SizeSelector() {
  const [selectedSize, setSelectedSize] = useState('');

  const sizes = ['S', 'M', 'L', 'XL', 'XXL'];

  return (
    <select 
      value={selectedSize} 
      onChange={(e) => setSelectedSize(e.target.value)}
    >
      <option value="">选择码数</option>
      {sizes.map(size => (
        <option key={size} value={size}>{size}</option>
      ))}
    </select>
  );
}

使用单选按钮组（Radio Buttons） 通过 <input type="radio"> 提供直观的码数选择，适合选项较少的情况：

function SizeRadioGroup() {
  const [selectedSize, setSelectedSize] = useState('');

  const sizes = ['36', '37', '38', '39', '40'];

  return (
    <div>
      {sizes.map(size => (
        <label key={size}>
          <input
            type="radio"
            name="size"
            value={size}
            checked={selectedSize === size}
            onChange={() => setSelectedSize(size)}
          />
          {size}
        </label>
      ))}
    </div>
  );
}

使用按钮组（Button Group） 将码数显示为可点击的按钮，增强用户体验：

function SizeButtonGroup() {
  const [selectedSize, setSelectedSize] = useState(null);

  const sizes = ['XS', 'S', 'M', 'L', 'XL'];

  return (
    <div>
      {sizes.map(size => (
        <button
          key={size}
          style={{ 
            backgroundColor: selectedSize === size ? '#000' : '#eee',
            color: selectedSize === size ? '#fff' : '#000'
          }}
          onClick={() => setSelectedSize(size)}
        >
          {size}
        </button>
      ))}
    </div>
  );
}

高级实现建议

动态码数数据 从 API 或配置文件中获取码数选项，适用于不同商品的不同尺码：

const [sizes, setSizes] = useState([]);

useEffect(() => {
  fetch('/api/sizes')
    .then(res => res.json())
    .then(data => setSizes(data));
}, []);

表单集成 将码数选择器作为表单的一部分，结合表单库（如 Formik 或 React Hook Form）进行验证和提交：

import { useForm } from 'react-hook-form';

function ProductForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <select {...register('size', { required: true })}>
        <option value="">选择码数</option>
        <option value="S">S</option>
        <option value="M">M</option>
      </select>
      <button type="submit">提交</button>
    </form>
  );
}

响应式设计 针对移动端优化，使用 UI 库（如 Material-UI 或 Ant Design）的组件：

import { Select, MenuItem } from '@mui/material';

function MuiSizeSelector() {
  const [size, setSize] = useState('');

  return (
    <Select
      value={size}
      onChange={(e) => setSize(e.target.value)}
      displayEmpty
    >
      <MenuItem value="">选择码数</MenuItem>
      <MenuItem value="S">S</MenuItem>
      <MenuItem value="M">M</MenuItem>
    </Select>
  );
}