用戶單擊菜單時如何保持焦點？

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內。

隨意問您是否要我詳細說明。