React输入框blur事件修正值相同时无法更新的问题排查

问题描述 #

• 需求：输入框失去焦点时，需将输入数字四舍五入为60以内15的最接近倍数；输入框始终回显修正后的数值（即使与计算值相同），同时保留下方0-45按钮的功能。
• 当前异常：输入12、24可正确修正为15、30，但输入11时输入框值保持11，未回显修正后的0。

解决方案 #

修改代码为受控组件，统一状态管理并完善数值处理逻辑，确保输入框值始终与修正后的状态同步：

import React, { useState } from "react";

const InputComponent = ({ defaultValue }) => {
  // 初始化状态为传入的默认值，保证初始显示正确
  const [newValue, setNewValue] = useState(defaultValue);

  const roundMinutesTo15 = (inputValue) => {
    // 将输入值转为数字，空值或非数字默认按0处理
    const numValue = Number(inputValue) || 0;
    // 计算60以内15的最接近倍数
    const rounded = (Math.round(numValue / 15) * 15) % 60;
    setNewValue(rounded);
  };

  return (
    <>
      <input
        min="0"
        max="59"
        maxLength="2"
        type="text"
        // 受控绑定，输入框值由状态直接控制
        value={newValue}
        onChange={(e) => {
          // 过滤非数字输入，仅保留有效数字
          const validInput = e.currentTarget.value.replace(/[^0-9]/g, '');
          setNewValue(validInput);
        }}
        onBlur={(e) => roundMinutesTo15(e.currentTarget.value)}
      />
      <br />
      New Value: {newValue}
      <br />
      <button type="button" onClick={() => setNewValue(0)}>0</button>
      <button type="button" onClick={() => setNewValue(15)}>15</button>
      <button type="button" onClick={() => setNewValue(30)}>30</button>
      <button type="button" onClick={() => setNewValue(45)}>45</button>
    </>
  );
};

InputComponent.defaultProps = {
  defaultValue: 0
};

export default InputComponent;

关键修改说明 #

1. 统一状态管理：移除多余的value状态，直接用newValue作为输入框的受控值，确保状态与输入框显示完全同步。
2. 输入值校验：onChange时过滤非数字字符，避免无效输入干扰后续计算。
3. 完善数值转换：失去焦点时将输入值转为数字，空值或非数字默认按0处理，解决输入11这类数值无法正确修正的问题。
4. 修正输入框属性：将max属性从0改为59，符合60以内数值的需求。
5. 初始化状态：将newValue初始化为传入的defaultValue，保证组件首次渲染时显示正确默认值。

内容的提问来源于stack exchange，提问作者Bravebox