onBlur事件不允许链接点击进行注册
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了onBlur事件不允许链接点击进行注册相关的知识,希望对你有一定的参考价值。
我有一个带有React-InstantSearch: <SearchBox />
的导航栏,它为我提供了自动完成功能,有一个onChange
事件触发,显示建议框。当您离开搜索框并隐藏框时,还会发生onBlur
事件。这个onBlur
事件阻止了点击链接点击。 (通过删除验证)。有没有人建议如何纠正这个问题?代码如下:
Relevant Portion of App.js
render() {
if (this.state.redirect) {
return (
<div className="App-container">
<InstantSearch
appId="{MY APP ID}"
apiKey={process.env.REACT_APP_ALGOLIA_API_KEY}
indexName="blog_posts"
>
<NavigationBar
loggedIn={this.state.loggedIn}
handleLogout={this.handleLogout}
username={this.state.username}
/>
<Redirect to="/" />;
</InstantSearch>
</div>
);
}
return (
<div className="App-container">
<InstantSearch
appId="{MY APP ID}"
apiKey={process.env.REACT_APP_ALGOLIA_API_KEY}
indexName="blog_posts"
>
<NavigationBar
loggedIn={this.state.loggedIn}
handleLogout={this.handleLogout}
username={this.state.username}
/>
<Switch>
<Route exact path="/" />
<Route path="/posts" component={PostListView} />
<Route
path="/post/:postID"
render={props => (
<PostDetailView
{...props}
loggedIn={this.state.loggedIn}
username={this.state.username}
deleteComment={this.deleteComment}
/>
)}
/>
<Route
path="/login"
render={props => (
<LoginForm {...props} handleLogin={this.handleLogin} />
)}
/>
</Switch>
</InstantSearch>
</div>
);
}
}
export default App;
NavigationBar.js
import React, { Component } from "react";
import { Navbar, Nav, NavItem } from "react-bootstrap";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { Hits, SearchBox, Highlight } from "react-instantsearch-dom";
import CompanyHeader from "../config/settings.js";
/**
* Navigation Bar for App
* Utilizes react-bootstrap
* @extends Component
*/
class NavigationBar extends Component {
constructor(props) {
super(props);
this.state = {
hitResultsShown: false
};
this.onChange = this.onChange.bind(this);
this.onBlur = this.onBlur.bind(this);
}
onChange() {
this.setState({
hitResultsShown: true
});
}
onBlur(e) {
this.setState({
hitResultsShown: false
});
e.target.value = "";
}
render() {
const logged_in_nav = (
<React.Fragment>
<NavItem eventKey={2} href="#">
{`Hello, ${this.props.username}`}
</NavItem>
<NavItem eventKey={3} onClick={this.props.handleLogout}>
Logout
</NavItem>
</React.Fragment>
);
const logged_out_nav = (
<React.Fragment>
<NavItem eventKey={2} href="/login">
Log In
</NavItem>
<NavItem eventKey={3} href="/signup">
SignUp
</NavItem>
</React.Fragment>
);
return (
// Instantiate a Navbar with:
// Dark Theme
// Full-width
// sticks to top of viewport
<Navbar inverse fluid fixedTop>
<Navbar.Header>
<Navbar.Brand>
<a href="/">{CompanyHeader}</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="/random">
Random Post
</NavItem>
{this.props.loggedIn ? logged_in_nav : logged_out_nav}
</Nav>
<Navbar.Form pullRight>
<SearchBox onChange={this.onChange} onBlur={this.onBlur} />
{this.state.hitResultsShown ? <Hits hitComponent={PostHits} /> : ""}
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
);
}
}
class PostHits extends Component {
constructor(props) {
super(props);
}
render() {
const hit = this.props.hit;
return (
<div>
<span className="hit-name">
<Link to={`/post/${hit.id}`}>
<Highlight attribute="title" hit={hit} className="font--bold" />
</Link>
</span>
<p className="well">
{hit.content.length > 100 ? hit.content.slice(0, 100) : hit.content}
</p>
</div>
);
}
}
发生这种情况是因为你的onBlur只包装了Searchbox组件。
当您单击建议框链接时,您将从搜索框中删除焦点,然后隐藏建议。
您所要做的就是将onBlur中的两个元素包装起来,您的问题将得到解决:
<div onFocus={this.onChange} onBlur={this.onBlur} >
<SearchBox />
{this.state.hitResultsShown && <Hits hitComponent={PostHits} />}
</div>
注意:内联条件渲染更像是^和onFocus将调用它一次而不是像onChange那样重复。
在这种情况下,您的建议框通常会成为搜索组件的一部分,因为它本质上是链接的,将模糊/更改功能推送到该组件并使其更加独立。
以上是关于onBlur事件不允许链接点击进行注册的主要内容,如果未能解决你的问题,请参考以下文章
事件(Event)(onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse)转载
JavaScript 中的事件onload 加载完成事件-onclick 单击事件-onblur 失去焦点事件-onchange 内容发生改变事件-onsubmit 表单提交事件
js常用对象:点击双击onload事件鼠标相关onblur事件和onfocus事件等;通过循环给多个元素添加事件通过addEventListener() 方法 监听事件函数