reactjs - React 中 div 元素的 onBlur
问题描述
我想在 div 元素离开焦点后执行一个功能。
我在 div 中使用 tabIndex 和 onBlur 函数。当我通过单击 div 内的任何元素手动设置焦点时,它的工作正常。但默认情况下,当在 div 内没有单击任何项目时,它不起作用。
我的组件是一个功能组件,并且 div 是动态呈现的,所以我也无法使用 useRef 设置焦点。
const renderHeaderCell = (header, headerKey) => {
return (
<div className="DataTable__header-cell-wrapper">
{filterable ? (
<IconButton onClick={() => toggleFilterPanel(headerKey)}>
<i className="material-icons">filter_list</i>
</IconButton>
) : null}
{activeFilterHeader === headerKey ? (
<div
tabIndex={0}
onFocus={e => {
console.log("DIV", "focus");
}}
onBlur={e => {
console.log("DIV", "blur");
}}
style={{ border: "1px solid blue" }}
>
DIV container
<input
type="text"
onFocus={e => {
console.log("input", "focus");
}}
onBlur={e => {
e.stopPropagation();
console.log("input", "blur");
}}
placeholder="Inside Textbox"
/>
Click outside
</div>
) : null}
{sortedByColumn === headerKey ? renderSortIcon() : null}
</div>
);
};
单击图标以显示 DIV 后的代码
const toggleFilterPanel = headerKey => {
if (activeFilterHeader === headerKey) {
setActiveFilterHeader("");
} else {
setActiveFilterHeader(headerKey);
setUniqueItemsForFilter(getUniqueItemsForFilter(rows, headerKey));
}
};
调用 onBlur 之后的代码
const onBlur = () => {
console.log("Blured");
};
那么我应该如何让 onBlur 处理 div 元素呢?
下图显示当前焦点
解决方案
blur
事件可能非常棘手,特别是如果您在可聚焦元素中有可聚焦元素。打开控制台并稍微玩一下那段代码,以便更好地理解“模糊”和“焦点”事件是如何工作的。
class BlurExample extends React.Component {
render() {
const {title} = this.props;
return (
<div
tabIndex={ 0 }
onFocus={ () => {console.log('main', 'focus');} }
onBlur={ () => {console.log('main', 'blur');} }
style={ { border: '1px solid coral', padding: '10px', fontFamily: 'sans-serif' } }
>
Click here 1
<input
type="text"
onFocus={ () => {console.log('input', 'focus');} }
onBlur={ () => {console.log('input', 'blur');} }
placeholder="Click here 2"
style={ { margin: '0 10px', padding: '10px' } }
/>
Click here 3
</div>
);
}
}
ReactDOM.render(
<BlurExample />,
document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
blur
如果您单击焦点元素内部,则不会发生事件。如果内部有另一个可聚焦元素并单击它,则例外。但是请注意,在main blur
您将看到input focus
并且main focus
如果您在主元素之外单击,您还将看到两个blur
事件:input blur
然后main blur
推荐阅读
- php - 在自定义 wp-query 中创建后置过滤器
- android - 从 EditText 中删除 maxLength 集
- javascript - ESLint 不会从 npm 命令抛出任何错误
- php - 加入结果不正确 php
- php - 雄辩模型的正确关系
- javascript - Create-React-App 在 WHM/cPanel 服务器上显示空白页面
- c - 康威的士兵 - C
- javascript - 如何在 .js 文件中的 app.post() 中定义函数
- php - login_check 302 找到 symfony 2
- sql-server - 强制访问忘记链接表的用户名和密码