当用户点击菜单时如何保持焦点？ [英] How do I retain focus when the user clicks a menu?

问题描述

我有以下要求：

• 显示输入字段。


• 显示菜单。


• 当输入字段具有焦点时，显示菜单。


• 如果输入字段失去焦点，则隐藏菜单。


• 如果单击该菜单，即使输入字段失去焦点，也要保留菜单。

• Display an input field.
• Display a menu.
• When the input field has focus, show the menu.
• If the input field looses focus, hide the menu.
• If the menu is clicked, retain the menu even though the input field has lost focus.

重现我的问题：
- 将光标放在输入字段中
- 点击菜单

To reproduce my issue: - Place cursor in the input field - Click the menu

预期：
- 菜单仍然可见

Expected: - The menu is still visible

实际：
- 菜单消失

Actual: - The menu disappears

这在React中应该是直截了当的，但我还没有能够以最明显的方式解决这个问题，并想知道我在忽视它。

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.

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>
    );
  }
}

现场演示： http://jsbin.com/zixuhoj/6/edit?js,console,output

推荐答案

您正在侦听模糊和点击事件。在单击事件之前触发模糊事件，因此永远不会调用 handleMenuClick 。

You're listening for blur and click events. Blur events are fired before click events so your handleMenuClick will never be called.

相反，您可以收听 onMouseDown 并设置的标志menuClicked 或类似的东西，并在 blur 事件中查看该标志。

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.

可在此处找到演示： http://jsbin.com/buzisepafu/1/edit?js,console ，输出

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'));

这篇关于当用户点击菜单时如何保持焦点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！