[英]How do I retain focus when the user clicks a menu?
I have the following requirements: 我有以下要求:
To reproduce my issue: - Place cursor in the input field - Click the menu 重现我的问题:-将光标放在输入字段中-单击菜单
Expected: - The menu is still visible 预期:-菜单仍然可见
Actual: - The menu disappears 实际:-菜单消失了
This should be straightforward in React, but I haven't been able to solve this in the most obvious way and would like to know what it is I'm overlooking. 在React中,这应该很简单,但是我无法以最明显的方式解决它,并且想知道我正在忽略什么。
class App extends React.Component {
constructor() {
super();
this.state = {};
this.handleFocus = this.handleFocus.bind(this);
this.handleBlur = this.handleBlur.bind(this);
}
handleFocus() {
this.setState({ hasFocus: true });
}
handleBlur() {
this.setState({ hasFocus: false});
}
handleMenuClick() {
this.setState({ hasFocus: true });
}
render() {
const { hasFocus } = this.state;
const menuInstance = (
<div
onClick={this.handleMenuClick}
tabIndex="0"
>
Some menu
</div>
);
return (
<div>
<h1>Focus issue</h1>
<p>How do I retain focus if the user clicks on the menu item?</p>
<input
onBlur={this.handleBlur}
onFocus={this.handleFocus}
defaultValue="some value"
/>
{ hasFocus && menuInstance }
</div>
);
}
}
Live demo here: http://jsbin.com/zixuhoj/6/edit?js,console,output 此处的现场演示: http : //jsbin.com/zixuhoj/6/edit?js,控制台,输出
You're listening for blur and click events. 您正在监听模糊和单击事件。 Blur events are fired before click events so your
handleMenuClick
will never be called. 单击事件之前会触发模糊事件,因此永远不会调用
handleMenuClick
。
Instead you can listen to onMouseDown
and set a flag for menuClicked
or something like that and look at that flag in the blur
event. 相反,你可以听
onMouseDown
,并设置标志menuClicked
或类似的东西,并期待在该标志blur
事件。
Demo can be found here: http://jsbin.com/buzisepafu/1/edit?js,console,output 演示可以在这里找到: http : //jsbin.com/buzisepafu/1/edit?js,console,output
class App extends React.Component {
constructor() {
super();
this.state = {};
this.handleFocus = this.handleFocus.bind(this);
this.handleBlur = this.handleBlur.bind(this);
this.handleMenuClick = this.handleMenuClick.bind(this);
}
handleFocus() {
this.setState({ hasFocus: true });
}
handleBlur() {
if (!this.state.menuClicked) {
this.setState({ hasFocus: false});
}
}
handleMenuClick (event) {
this.setState({ menuClicked: true });
}
render() {
const { hasFocus } = this.state;
const menuInstance = (
<div
className="menu"
onMouseDown={this.handleMenuClick}
tabIndex="0"
>
Some menu
</div>
);
return (
<div>
<h1>Focus issue</h1>
<p>How do I retain focus if the user clicks on the menu item?</p>
<input
onBlur={this.handleBlur}
onFocus={this.handleFocus}
defaultValue="some value"
/>
{ hasFocus && menuInstance }
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
I found a different approach that works in my environment where the users only have Chrome where I put the onBlur
handler on the outer div
and check if the relatedElement
on the blur
event is inside the outer div
or not. 我发现了一种在我的环境中
relatedElement
方法,在该环境中,用户只有Chrome,我将onBlur
处理程序放在外部div
并检查blur
事件上的relatedElement
是否在外部div
内。
Feel free to ask if you'd like me to elaborate. 随意问您是否要我详细说明。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.