在React中实现带有min/max限制的受控数字输入组件

<input
  type="text"
  maxLength={Math.max(min.toString().length, max.toString().length + 1)}
  css={inputStyles}
  value={value} // 直接使用父组件的value
  onChange={(e) => {
    // 允许用户输入，并实时更新父组件状态
    // 注意：e.target.value是字符串，这里直接传递给父组件，
    // onBlur时再进行类型转换和验证
    setValue(e.target.value);
  }}
  onBlur={(e) => {
    let numericValue = parseFloat(value); // 将当前值转换为数字
    // 检查是否是有效数字
    if (!isNaN(numericValue)) {
      // 使用Math.min和Math.max将值钳制在min和max之间
      const clampedValue = Math.min(max, Math.max(min, numericValue));
      // 如果钳制后的值与当前值不同，则更新父组件状态
      if (clampedValue !== numericValue) {
        setValue(clampedValue);
      }
    } else {
      // 处理无效输入：例如，将值重置为min、max或上一个有效值
      // 实际应用可能需要更复杂的逻辑，例如显示错误信息
      setValue(min); // 示例：重置为最小值
    }
  }}
/>

<StepButton
  aria-label="Reduce by one"
  tabIndex="-1"
  onClick={() => {
    // 确保递减后的值不小于min
    setValue(Math.max(min, value - 1));
  }}
>
  {/* SVG for decrement */}
</StepButton>

{/* ... input element ... */}

<StepButton
  aria-label="Increase by one"
  tabIndex="-1"
  onClick={() => {
    // 确保递增后的值不大于max
    setValue(Math.min(max, value + 1));
  }}
>
  {/* SVG for increment */}
</StepButton>

import React, { useState } from 'react';
import PropTypes from 'prop-types';

// 假设 theme 和 StepButton 已经定义在其他文件中
// 为了示例的完整性，这里提供简化的模拟实现
const theme = {
  richBlack: '#000000',
  white: '#FFFFFF'
};

const inputStyles = {
  width: '60px',
  textAlign: 'center',
  border: 'none',
  outline: 'none',
  fontSize: '16px',
};

// 简化的 StepButton 组件
const StepButton = ({ children, onClick, 'aria-label': ariaLabel, tabIndex }) => (
  <button
    onClick={onClick}
    aria-label={ariaLabel}
    tabIndex={tabIndex}
    style={{
      background: 'none',
      border: 'none',
      cursor: 'pointer',
      padding: '8px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    {children}
  </button>
);

const NumberSelector = ({
  min = -10,
  max = 10,
  value,
  onChange: setValue, // 将onChange重命名为setValue以便在组件内部使用
  className,
}) => {
  return (
    <div
      css={{
        display: "flex",
        border: `3px solid ${theme.richBlack}`,
        borderRadius: 5