React-ul with onBlur事件阻止onClick在li上触发

Question

我创建了一个移动下拉菜单，可以根据状态切换打开和关闭。一旦它被打开，我希望用户能够通过点击ul之外的任何地方来关闭下拉列表。

我正在将ul上的tabIndex属性设置为0，这将给出ul“焦点”。我还向ul添加了一个onBlur事件，触发隐藏ul的状态更改（dropdown Expanded=false）。

<ul tabIndex="0" onBlur={this.hideDropdownMenu}>
  <li onClick={this.handlePageNavigation}>Page 1</li>
  <li onClick={this.handlePageNavigation}>Page 2</li>
  <li onClick={this.handlePageNavigation}>Page 3</li>
</ul>

但是，当我实现此修复程序时，我在每个li元素上拥有的onclick事件将无法触发。

我知道这个事件正在冒泡，但我不知道如何解决它。有人能帮忙吗？

注：

我知道你可以在ul下面创建一个跨越整个视口的透明div，然后只需在该div上添加一个onClick即可改变状态，但是我读到了关于堆栈溢出的tabIndex/focus解决方案，我真的很想让它工作。

下面是代码的更完整视图（下拉列表供用户选择他们的祖国，这将更新ui）：

const mapStateToProps = (state) => {
    return {
        lang: state.lang
    }
}

const mapDispatchToProps = (dispatch) => {
    return { actions: bindActionCreators({ changeLang }, dispatch) };
}

class Header extends Component {
    constructor() {
        super();

        this.state = {
          langListExpanded: false
        }

        this.handleLangChange = this.handleLangChange.bind(this);
        this.toggleLangMenu = this.toggleLangMenu.bind(this);
        this.hideLangMenu = this.hideLangMenu.bind(this);

    }

    toggleLangMenu (){
      this.setState({
        langListExpanded: !this.state.langListExpanded
      });
    }

    hideLangMenu (){
      this.setState({
        langListExpanded: false
      });
    }


    handleLangChange(e) {
        let newLang = e.target.attributes['0'].value;
        let urlSegment = window.location.pathname.substr(7);

        // blast it to shared state
        this.props.actions.changeLang( newLang );
        // update browser route to change locale, but stay where they are at
        browserHistory.push(`/${ newLang }/${ urlSegment }`);
        //close dropdown menu
        this.hideLangMenu();
    }

    compileAvailableLocales() {
        let locales = availableLangs;
        let selectedLang = this.props.lang;

        let markup = _.map(locales, (loc) => {
            let readableName = language[ selectedLang ].navigation.locales[ loc ];

            return (
                <li
                  key={ loc }
                  value={ loc }
                  onMouseDown={ this.handleLangChange }>
                    { readableName }
                </li>
            );
        });

        return markup;
    }


    render() {
        let localeMarkup = this.compileAvailableLocales();
        return (
            <section className="header row expanded">
              < Navigation />
            <section className="locale_selection">
                  <button
                    className="btn-locale"
                    onClick={this.toggleLangMenu}>
                    {this.props.lang}
                  </button>
                  <ul
                      className={this.state.langListExpanded ? "mobile_open" : " "}
                      value={ this.props.lang }
                      tabIndex="0"
                      onBlur={this.hideLangMenu}>
                  >
                      { localeMarkup }
                  </ul>

                </section>
            </section>
        )
    }
}

Answer 1

我刚刚遇到了一个面包屑链接数组，其中一个onBlur处理程序正在引起重新渲染，阻止链接点击工作。实际的问题是，反应每次都会重新生成链接元素，所以当它重新渲染时，它会从鼠标下交换链接，这导致浏览器忽略点击。

修复方法是将key属性添加到我的链接中，以便响应将重用相同的DOM元素。

<ol>
    {props.breadcrumbs.map(crumb => (
        <li key={crumb.url}>
            <Link to={crumb.url} >
                {crumb.label}
            </Link>
        </li>
    ))}
</ol>

Answer 2

关键是onBlur正在触发重新渲染，这似乎会导致浏览器不执行onClick：https://github.com/facebook/react/issues/4210

但是，如果您检查onBlur事件，您可以找到有关正在发生的事情的一些信息，event.relatedTarget将被填充，并且您可以使用这些信息来检测onBlur是何时由onClick和chain触发的，无论您需要做什么。

Answer 3

尝试使用onMouseDown而不是onClick。