Ant Design InputNumber组件blur方法使用咨询：失焦时执行函数

嘿，我来帮你理清这个问题——其实Ant Design的InputNumber组件处理失焦逻辑很简单，你可能混淆了blur方法和onBlur事件的用法，我分两种常见场景给你说明：

一、监听组件失焦事件，自动执行函数 #

这是最常用的场景：当用户点击InputNumber外部，组件失去焦点时自动触发你定义的函数。Ant Design的InputNumber直接提供了onBlur属性，你只需要把要执行的函数绑定上去就行。

举个React函数组件的例子：

import { InputNumber } from 'antd';
import { useState } from 'react';

const InputNumberDemo = () => {
  const [inputValue, setInputValue] = useState(0);

  // 定义失焦时要执行的逻辑
  const handleInputBlur = (e) => {
    console.log('InputNumber已失焦，当前值为:', inputValue);
    // 这里可以添加你的业务逻辑，比如数据校验、提交表单等
    // 也可以通过e.target.value获取当前输入值
    // console.log('当前输入值（通过事件对象）:', e.target.value);
  };

  return (
    <InputNumber
      value={inputValue}
      onChange={setInputValue}
      onBlur={handleInputBlur} // 绑定失焦事件
      min={0}
      max={100}
      placeholder="请输入数字"
    />
  );
};

export default InputNumberDemo;

二、手动调用blur方法，主动让组件失焦 #

如果你需要在某个特定操作（比如点击按钮）时主动让InputNumber失去焦点，那需要通过ref获取组件实例，然后调用它的blur()方法，这时候也会触发onBlur绑定的函数。

示例代码如下：

import { InputNumber, Button } from 'antd';
import { useState, useRef } from 'react';

const ManualBlurDemo = () => {
  const [inputValue, setInputValue] = useState(0);
  // 创建ref用于获取InputNumber组件实例
  const inputNumberRef = useRef(null);

  const handleInputBlur = () => {
    console.log('手动触发了失焦，当前值为:', inputValue);
  };

  // 点击按钮时主动触发失焦
  const triggerBlurAction = () => {
    // 确保ref已获取到组件实例
    if (inputNumberRef.current) {
      inputNumberRef.current.blur(); // 调用组件的blur方法
    }
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
      <InputNumber
        ref={inputNumberRef} // 绑定ref
        value={inputValue}
        onChange={setInputValue}
        onBlur={handleInputBlur}
        min={0}
        max={100}
        placeholder="请输入数字"
      />
      <Button onClick={triggerBlurAction}>让输入框失焦</Button>
    </div>
  );
};

export default ManualBlurDemo;

一些注意事项： #

• 确保你使用的Ant Design版本是v4及以上，这些属性和方法在新版本中都是稳定支持的
• 如果是React类组件，用法类似，只是需要用createRef()来创建ref，然后通过this.inputNumberRef.current获取实例
• onBlur的参数是原生的事件对象，你可以通过它获取更多DOM相关的信息

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