小编Jor*_*son的帖子

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

我将ul上的tabIndex属性设置为0,这给出了ul"焦点".我还在ul中添加了一个onBlur事件,触发隐藏ul的状态更改(dropdownExpanded = 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事件都无法触发.

事件冒泡我知道事情正在发生,但我对如何修复它感到很失望.有人可以帮忙吗？

注意:

我知道你可以创建一个透明的div,它跨越整个视口的ul,然后只需添加一个onClick甚至可以改变状态的div,但我在Stack Overflow上读到了这个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: …

我为Bootstrap和React(我在Meteor应用程序中使用)找到了这个完美的Sweet Alert模块:

http://djorg83.github.io/react-bootstrap-sweetalert/

但我不明白你如何在React组件中包含这些代码.

当有人点击我的应用程序中的删除按钮时,我想要一个Sweet Alert提示弹出要求确认.

这是删除按钮的组件:

import React, {Component} from 'react';
import Goals from '/imports/collections/goals/goals.js'
import SweetAlert from 'react-bootstrap-sweetalert';

export default class DeleteGoalButton extends Component {

  deleteThisGoal(){
    console.log('Goal deleted!');
    // Meteor.call('goals.remove', this.props.goalId);
  }

  render(){
    return(
      <div className="inline">
          <a onClick={this.deleteThisGoal()} href={`/students/${this.props.studentId}/}`}
          className='btn btn-danger'><i className="fa fa-trash" aria-hidden="true"></i> Delete Goal</a>
      </div>
    )
  }
}

以下是我从Sweet Alert示例中复制的代码:

<SweetAlert
    warning
    showCancel
    confirmBtnText="Yes, delete it!"
    confirmBtnBsStyle="danger"
    cancelBtnBsStyle="default"
    title="Are you sure?"
    onConfirm={this.deleteFile}
    onCancel={this.cancelDelete}
>
    You will not be able to recover this imaginary file!
</SweetAlert>

有人知道怎么做吗？

我正在尝试使用 jQuery 库 (Highcharts) 在 React 组件中呈现数据。

据我了解，我需要将 jQuery 代码放在 componentDidMount() 函数中才能正确运行。它确实如此，只要我在 componentDidMount() 方法中包含静态数据。

但我想将 jQuery 代码连接到我的数据库，以便图表是反应式的。我读到 componentDidMount() 只运行一次，所以我怀疑我将无法在其中放置反应数据（我什至无法让道具登录到控制台......它们总是未定义）。

我可以将 props 传递给 componentDidUpdate()，但是我的 jQuery 代码不显示。

有人有解决方案吗？

谢谢！！