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

问题描述：

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

解决办法：

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

部分代码如下：

<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

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

区别

1. onMouseDown

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

2. onClick

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

实际应用

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

示例代码

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

处理 onMouseDown 和 onClick，下面是一个基于onClick和onMouseDwon的实例：

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;