onBlur事件不允许链接单击注册
onBlur事件不允许链接单击注册
提问于 2018-09-20 07:44:13
我有一个带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>
);
}
}回答 1
Stack Overflow用户
发布于 2018-09-20 09:28:19
这是因为您的onBlur只包装了Searchbox组件。
当您单击建议框链接时，您将从搜索框中移除焦点，并随后隐藏建议。
您所要做的就是将这两个元素都包装在onBlur中，这样您的问题就解决了：
<div onFocus={this.onChange} onBlur={this.onBlur} >
<SearchBox />
{this.state.hitResultsShown && <Hits hitComponent={PostHits} />}
</div>注意:内联条件渲染更好，像这样^，onFocus会调用它一次，而不是像onChange那样重复调用。
在这种情况下，你的建议框通常是搜索组件的一部分，因为它是固有的链接，将模糊/更改功能下推到该组件中，使其更加独立。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52415602
复制相关文章
相似问题