对于react中input输入框中onBlur和点击输入框外部按钮冲突

问题描述:

在使用 onBlur 处理输入框的失焦事件时发现它影响了外部的提交按钮,这通常是因为失焦事件会触发 handleBlur 函数,最终导致无法触发外部按钮进行提交操作。

解决办法:

onBlur 事件的触发优先级会高于 onClick 事件。使用 onMouseDown 事件来处理按钮点击。在点击按钮时,按钮的 onMouseDown 事件会在 onBlur 事件之前触发。 可以利用这个事件来确保按钮点击不会被 onBlur 影响。

部分代码如下:

html 复制代码
<input
    type="text"
    value={text}
    onChange={(e) => setText(e.target.value)}
    onBlur={handleBlur}
    onFocus={handleFocus}
    autoFocus
/>
<Button
  type="link"
  icon={<CloseOutlined style={{ color: "red" }} />}
  onMouseDown={() => handleBlur()} // 使用 onMouseDown 事件来处理
/>
<Button
  type="link"
  icon={<CheckOutlined />}
  onMouseDown={() => handleKeyDown()} // 使用 onMouseDown 事件来处理
/>

onClick 和 onMouseDown

onMouseDownonClick 是两个常用的事件处理器,在 React 组件中,它们通常用于处理用户的点击事件。虽然它们看似相似,但实际上有一些重要的区别和使用场景。

区别

  1. onMouseDown

    • 触发时间: 在鼠标按钮按下时触发。
    • 触发顺序: 在 onMouseUponClick 之前触发。
    • 使用场景: 适用于需要在鼠标按钮按下时立即执行某些操作的场景,比如实现自定义的拖放操作、或在点击时提供视觉反馈。
  2. onClick

    • 触发时间: 在鼠标按钮释放 时触发(鼠标按钮按下和释放之间必须在同一个元素上)。
    • 触发顺序: 在 onMouseDownonMouseUp 之后触发。
    • 使用场景: 适用于大多数点击事件的处理,如按钮点击、链接点击等。

实际应用

在处理复杂的交互时,可能需要同时使用这两个事件。以下是一些示例,说明如何使用 onMouseDownonClick 来解决问题,比如避免 onBlur 事件干扰按钮点击事件的问题。

示例代码

假设你有一个编辑功能,其中一个输入框可以编辑文本,旁边有一个取消和一个提交按钮。在点击按钮时,你可能会遇到 onBlur 事件干扰的问题,尤其是在输入框失去焦点时,按钮点击可能会受到影响。你可以使用 onMouseDown 来解决这个问题。

处理 onMouseDownonClick,下面是一个基于onClick和onMouseDwon的实例:
javascript 复制代码
import React, { useState } from 'react';

function EditableText() {
  const [text, setText] = useState('Click to edit');
  const [isEditing, setIsEditing] = useState(false);
  const [tempText, setTempText] = useState(text);

  const handleInputChange = (e) => {
    setTempText(e.target.value);
  };

  const handleBlur = () => {
    if (isEditing) {
      setIsEditing(false);
      setTempText(text); 
    }
  };

  const handleCancel = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsEditing(false);
    setTempText(text); 
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsEditing(false);
    setText(tempText); 
  };

  const handleMouseDown = (e) => {
    
    e.preventDefault();
  };

  return (
    <div>
      {isEditing ? (
        <div>
          <input
            type="text"
            value={tempText}
            onChange={handleInputChange}
            onBlur={handleBlur}
            autoFocus
          />
          <button onMouseDown={handleMouseDown} onClick={handleSubmit}>
            Submit
          </button>
          <button onMouseDown={handleMouseDown} onClick={handleCancel}>
            Cancel
          </button>
        </div>
      ) : (
        <span onClick={() => setIsEditing(true)}>{text}</span>
      )}
    </div>
  );
}

export default EditableText;
相关推荐
侃侃_天下3 天前
最终的信号类
开发语言·c++·算法
echoarts3 天前
Rayon Rust中的数据并行库入门教程
开发语言·其他·算法·rust
Aomnitrix3 天前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
每天回答3个问题3 天前
UE5C++编译遇到MSB3073
开发语言·c++·ue5
伍哥的传说3 天前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
小莞尔3 天前
【51单片机】【protues仿真】 基于51单片机八路抢答器系统
c语言·开发语言·单片机·嵌入式硬件·51单片机
我是菜鸟0713号3 天前
Qt 中 OPC UA 通讯实战
开发语言·qt
JCBP_3 天前
QT(4)
开发语言·汇编·c++·qt·算法
Brookty3 天前
【JavaEE】线程安全-内存可见性、指令全排序
java·开发语言·后端·java-ee·线程安全·内存可见性·指令重排序
百锦再3 天前
[特殊字符] Python在CentOS系统执行深度指南
开发语言·python·plotly·django·centos·virtualenv·pygame