限制 React 输入框数值范围：一个详细教程

import React from 'react';

const NumberSelector = ({ min = -10, max = 10, value, onChange }) => {
  const handleChange = (e) => {
    const inputValue = e.target.value;
    onChange(inputValue); // 先更新父组件的状态
  };

  const handleBlur = (e) => {
    const inputValue = e.target.value;

    // 检查输入值是否为有效数字
    if (inputValue && !isNaN(inputValue)) {
      const parsedValue = parseFloat(inputValue);
      // 使用 Math.min 和 Math.max 限制数值范围
      const clampedValue = Math.min(max, Math.max(min, parsedValue));
      onChange(clampedValue); // 更新父组件的状态为限制后的值
    } else {
      // 如果输入不是数字，可以设置为最小值或者清空
      onChange(min); // 或者 onChange('')，取决于你的需求
    }
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      onBlur={handleBlur}
    />
  );
};

export default NumberSelector;

import React from 'react';

const StepButton = ({ onClick, children, ariaLabel, tabIndex }) => (
  <button aria-label={ariaLabel} tabIndex={tabIndex} onClick={onClick}>
    {children}
  </button>
);

const NumberSelector = ({ min = -10, max = 10, value, onChange }) => {
  const handleChange = (e) => {
    const inputValue = e.target.value;
    onChange(inputValue);
  };

  const handleBlur = (e) => {
    const inputValue = e.target.value;

    if (inputValue && !isNaN(inputValue)) {
      const parsedValue = parseFloat(inputValue);
      const clampedValue = Math.min(max, Math.max(min, parsedValue));
      onChange(clampedValue);
    } else {
      onChange(min);
    }
  };

  const handleIncrement = () => {
    onChange(Math.min(max, (parseFloat(value) || 0) + 1));
  };

  const handleDecrement = () => {
    onChange(Math.max(min, (parseFloat(value) || 0) - 1));
  };


  return (
    <div>
      <StepButton
        aria-label="Reduce by one"
        tabIndex="-1"
        onClick={handleDecrement}
      >
        -
      </StepButton>
      <input
        type="text"
        value={value}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      <StepButton
        aria-label="Increase by one"
        tabIndex="-1"
        onClick={handleIncrement}
      >
        +
      </StepButton>
    </div>
  );
};

export default NumberSelector;