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

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,console,output

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