https://codesandbox.io/s/react-textarea-callback-on-blur-yoh8n?file=/src/App.tsx
在React中有一个文本区域,我想实现两个基本用例:
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。
答案 0 :(得分: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
答案 1 :(得分:0)
也许您可以添加一个变量(或类属性,如果您使用类组件而不是功能组件)作为“ 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
/>