用户单击菜单时如何保持焦点？

Question

我有以下要求：

• 显示输入字段。
• 显示菜单。
• 当输入字段具有焦点时，显示菜单。
• 如果输入字段失去焦点，请隐藏菜单。
• 如果单击菜单，即使输入字段失去焦点，仍保留菜单。

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

预期：-菜单仍然可见

实际：-菜单消失了

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

此处的现场演示： http : //jsbin.com/zixuhoj/6/edit?js，控制台，输出

Answer 1

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

相反，你可以听onMouseDown ，并设置标志menuClicked或类似的东西，并期待在该标志blur事件。

演示可以在这里找到： 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'));

Answer 2

我发现了一种在我的环境中relatedElement方法，在该环境中，用户只有Chrome，我将onBlur处理程序放在外部div并检查blur事件上的relatedElement是否在外部div内。

随意问您是否要我详细说明。