react如何选择码数

React 组件选择码数的方法

在 React 中实现选择码数的功能，可以通过下拉菜单、单选按钮或自定义组件实现。以下是一个常见的下拉菜单实现方式：

import React, { useState } from 'react';

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

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

  const handleSizeChange = (event) => {
    setSelectedSize(event.target.value);
  };

  return (
    <div>
      <label htmlFor="size-select">选择码数：</label>
      <select 
        id="size-select" 
        value={selectedSize} 
        onChange={handleSizeChange}
      >
        <option value="">请选择</option>
        {sizes.map(size => (
          <option key={size} value={size}>{size}</option>
        ))}
      </select>
      {selectedSize && <p>您选择了: {selectedSize}</p>}
    </div>
  );
}

export default SizeSelector;

单选按钮实现方式

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

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

  return (
    <div>
      <h3>选择码数：</h3>
      {sizes.map(size => (
        <div key={size}>
          <input
            type="radio"
            id={`size-${size}`}
            name="size"
            value={size}
            checked={selectedSize === size}
            onChange={() => setSelectedSize(size)}
          />
          <label htmlFor={`size-${size}`}>{size}</label>
        </div>
      ))}
      {selectedSize && <p>您选择了: {selectedSize}</p>}
    </div>
  );
}

带尺寸表的自定义组件

对于需要显示详细尺寸信息的场景，可以创建一个更复杂的组件：

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

  const sizeChart = [
    { size: 'S', chest: '90-95cm', waist: '70-75cm' },
    { size: 'M', chest: '95-100cm', waist: '75-80cm' },
    { size: 'L', chest: '100-105cm', waist: '80-85cm' },
    { size: 'XL', chest: '105-110cm', waist: '85-90cm' },
    { size: 'XXL', chest: '110-115cm', waist: '90-95cm' }
  ];

  return (
    <div>
      <h3>选择码数</h3>
      <div style={{ display: 'flex', gap: '10px' }}>
        {sizeChart.map(item => (
          <div 
            key={item.size}
            style={{ 
              padding: '10px', 
              border: selectedSize === item.size ? '2px solid blue' : '1px solid gray',
              cursor: 'pointer'
            }}
            onClick={() => setSelectedSize(item.size)}
          >
            <div><strong>{item.size}</strong></div>
            <div>胸围: {item.chest}</div>
            <div>腰围: {item.waist}</div>
          </div>
        ))}
      </div>
      {selectedSize && (
        <p>已选择: {selectedSize} 码</p>
      )}
    </div>
  );
}

与表单集成

在实际应用中，通常需要将尺寸选择器集成到表单中：

function ProductForm() {
  const [formData, setFormData] = useState({
    size: '',
    color: '',
    quantity: 1
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交的数据:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>选择码数：</label>
        <select 
          name="size" 
          value={formData.size} 
          onChange={handleChange}
          required
        >
          <option value="">请选择</option>
          <option value="S">S</option>
          <option value="M">M</option>
          <option value="L">L</option>
          <option value="XL">XL</option>
        </select>
      </div>
      <button type="submit">加入购物车</button>
    </form>
  );
}

以上实现方式可以根据具体需求进行调整，如添加尺寸缺货状态、与库存系统联动等功能。