Question

https://codesandbox.io/s/react-textarea-callback-on-blur-yoh8n?file=/src/App.tsx

在React中有一个文本区域，我想实现两个基本用例：

当用户按下“ Escape”键时，移开焦点并重置某些状态
当用户在文本区域外单击并失去焦点（=> saveToDatabase）时，执行回调（onBlur）

<textarea
  ref={areaRef}
  value={input}
  onChange={handleChange}
  onKeyDown={handleKeyDown}
  onBlur={handleBlur}
/>

对于第一个用例，我在目标上调用blur()：

const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  if (e.key === "Escape") {
    console.log("Escape clicked");
    setInput(inputForReset);
    e.currentTarget.blur();
  }
};

..但是这也调用了onBlur处理程序，我实际上想在第二个用例中使用它。我试图通过ref来确定事件调用者是否是textarea本身，但这不起作用：

const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
  console.log("blur");
  /**
   * Only save to database when losing focus through clicking
   * outside of the text area, not for every blur event.
   */
  if (areaRef.current && !areaRef.current.contains(e.currentTarget as Node)) {
    saveToDatabase();
  }
};

换句话说：我想在用户在文本区域完成编辑后将某些内容保存到数据库中，但是我不知道如何区分以编程方式触发的blur事件和本机{{ 1}}事件，当您在节点外部单击时，将使用textarea。

Answer 1

我注意到了错误所在。模糊事件的目标本身就是

areaRef === event.target

因此，您必须实现其他功能以在框外捕获点击。

import * as React from "react";
import "./styles.css";
import { useState, useRef, useEffect } from "react";

function useOutsideAlerter(
  ref: React.RefObject<HTMLTextAreaElement>,
  fun: () => void
) {
  useEffect(() => {
    function handleClickOutside(event: any) {
      if (
        ref.current &&
        !ref.current.contains(event.target) &&
        // THIS IS IMPORTANT TO CHECK
        document.activeElement === ref.current
      ) {
        fun();
      }
    }

    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
}

export default function App() {
  const areaRef = useRef<HTMLTextAreaElement>(null);
  const [inputForReset, setInputForReset] = useState<string>("Original input");
  const [input, setInput] = useState<string>(inputForReset);

  const saveToDatabase = () => {
    console.log("save to database");
    setInputForReset(input);
    alert(input);
  };

  // OUT SIDE CLICK

  useOutsideAlerter(areaRef, saveToDatabase);

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInput(e.target.value);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Escape") {
      console.log("Escape clicked");
      setInput(inputForReset);
      e.currentTarget.blur();
      e.stopPropagation();
    }
  };

  // it doesnt work
  
  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
    /**
     * Only save to database when losing focus through clicking
     * outside of the text area, not for every blur event.
     */
    console.log(event.target);
    console.log(areaRef);

    if (areaRef.current && !areaRef.current.contains(event.target)) {
      saveToDatabase();
    }
  };

  return (
    <div className="App">
      <textarea
        ref={areaRef}
        value={input}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        onBlur={handleBlur}
        className="area"
      />
      <p>Input state: {input}</p>
    </div>
  );
}

请检查我的sandbox

Answer 2

也许您可以添加一个变量（或类属性，如果您使用类组件而不是功能组件）作为“ preventsaveOnBlur”标志；像这样：

let preventSaveOnBlur: boolean = false;

const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  if (e.key === "Escape") {
    console.log("Escape clicked");
    setInput(inputForReset);
    preventSaveOnBlur = true;  // will prevent saving on DB - see handleBlur 
    e.currentTarget.blur();
  }
};

const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
  console.log("blur");
  /**
   * Only save to database when losing focus through clicking
   * outside of the text area, not for every blur event.
   */
  if (!preventSaveOnBlur) {
    saveToDatabase();
  }
};

const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
  preventSaveOnBlur = false;
};

，在文本区域中，您也可以处理onFocus事件：

<textarea
  ref={areaRef}
  value={input}
  onChange={handleChange}
  onKeyDown={handleKeyDown}
  onBlur={handleBlur}
  onFocus={handleFocus} // will reset 'preventSaveOnBlur' to false every time the textarea get the focus
/>

失去焦点/ onBlur时反应textarea回调

2 个答案: