如何实现仅在日期选择完成或按回车时调用API，避免实时触发？

针对你在模态框中使用type="date"输入框遇到的问题——不想每次输入内容变化就触发API，只在日历选日期或手动输入后按回车时触发，这里提供两种可行方案：

方案一：区分输入场景+监听回车键 #

核心思路是：

• 日历选择日期时，onChange会一次性触发完整日期的更新，此时直接调用API
• 手动输入时，仅在按下回车键且日期格式完整时触发API，中间输入过程只更新表单数据

修改后的代码示例：

<Input
  type="date"
  className={`${validateFieldBorder(item.display_name)}`}
  placeholder=""
  name={`${item.name}`}
  onChange={(e) => {
    // 先更新表单数据
    onChangeField(e);
    const inputValue = e.target.value;
    // 完整日期格式为YYYY-MM-DD，长度固定为10
    if (inputValue.length === 10) {
      // 调用你的API逻辑
      callYourApi();
    }
  }}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      const inputValue = e.target.value;
      if (inputValue.length === 10) {
        callYourApi();
      }
    }
  }}
  value={formData[item.name] ?? undefined}
  max={new Date().toJSON()?.slice(0, 10)}
  disabled={isDisabled}
/>

方案二：结合onFocus/onBlur+输入场景判断 #

解决你之前onblur失效的问题，同时兼容移动端：

• 手动输入时，通过onBlur触发API（按下回车可主动触发失焦）
• 日历选择时，直接在onChange中判断场景并调用API

代码示例：

// 先在组件内定义状态跟踪是否为手动输入
const [isManualTyping, setIsManualTyping] = useState(false);

// ...

<Input
  type="date"
  className={`${validateFieldBorder(item.display_name)}`}
  placeholder=""
  name={`${item.name}`}
  onChange={(e) => {
    onChangeField(e);
    // 日历选择的输入事件类型不是手动插入文本，直接调用API
    if (e.nativeEvent.inputType !== 'insertText') {
      callYourApi();
    }
  }}
  onFocus={() => setIsManualTyping(true)}
  onBlur={() => {
    if (isManualTyping) {
      const inputValue = formData[item.name];
      if (inputValue?.length === 10) {
        callYourApi();
      }
      setIsManualTyping(false);
    }
  }}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      e.target.blur(); // 按下回车主动触发失焦，触发API调用
    }
  }}
  value={formData[item.name] ?? undefined}
  max={new Date().toJSON()?.slice(0, 10)}
  disabled={isDisabled}
/>

为什么之前的方法失效？ #

• onblur：部分浏览器中，通过日历选择日期后输入框不会自动失焦，导致事件未触发
• onMouseDown：移动端没有鼠标事件，自然无法响应

内容的提问来源于stack exchange，提问作者Midhun p k