相关疑难解决方法(0)

我想阻止点击事件冒出来.因此我在我的代码中添加了e.stopPropagation().我总是在控制台出错,说:Uncaught TypeError: e.stopPropagation is not a function

在reactjs中设置stopPropagation的正确方法是什么？

      handleClick: function(index, e) {
        e.stopPropagation();

        ...

    }, 

我正在构建一个下拉菜单React组件,当用户单击组件外部的DOM 中的任何位置时,该组件应该关闭.

使用jQuery我通常会body在打开下拉菜单时添加一个事件监听器,并在下拉菜单关闭时再次将其删除.(事件监听器本身关闭下拉-任何点击事件中,该成分不会传播到防止身体单击处理烧制而成)

有没有办法body从React组件中将侦听器附加到元素？或者我应该只使用jQuery？(我有点担心混合使用React和jQuery.)

我正在创建出现在屏幕顶部的菜单.当用户点击其中一个菜单项div时会出现很多链接.我不能通过点击另一个菜单项(没问题,已经实现它)来隐藏这个div,而且还可以点击其他任何地方然后点击这个div和menuitems.

我听说过两个解决方案:

• 显示菜单后面的隐形div并覆盖整个屏幕并为其添加单击处理程序.
• 将事件处理程序附加到document.body.

第一个对我不好,因为该div将覆盖页面上的链接,我希望它们即使在点击menuitem后也可以点击,并且它出现了相应的div.所以我尝试了第二次灵魂.但问题是在我的组件的处理程序之前触发了body上的jquery click处理程序.我不知道如何让它首先调用我的组件处理程序,然后阻止事件传播.

这是代码和js小提琴:

/** @jsx React.DOM */
var Menu = React.createClass({
    click: function(e) {
        console.log('component handled click - should be called before jquery one and prevent jquery handler from running at all');
        e.stopPropagation();
    },
    render: function(){
    console.log("component renders");
        return (
            <div>
                <div>| MenuItem1 | MenuItem2 | MenuItem 3 |</div>
                <br />
                <div className="drop">
                    MenuItem 1 (This div appears when you click menu item)
                    <ul>
                        <li><a href="#" onClick={this.click}>Item 1 - when I click this I don't want …

我们有菜单。如果菜单是打开的，我们应该可以通过单击任意位置来关闭它：

class Menu extends Component {
  componentWillMount() {
    document.addEventListener("click", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.handleClickOutside);
  }

  openModal = () => {
    this.props.showModal();
  };

  handleClickOutside = ({ target }) => {
    const { displayMenu, toggleMenu, displayModal } = this.props;

    if (displayMenu) {
      if (displayModal || this.node.contains(target)) {
        return;
      }
      toggleMenu();
    }
  };
  render() {
    return (
      <section ref={node => (this.node = node)}>
        <p>
          <button onClick={this.openModal}>open modal</button>
        </p>
        <p>
          <button onClick={this.openModal}>open modal</button>
        </p>
        <p>
          <button onClick={this.openModal}>open modal</button>
        </p>
      </section>
    );
  }
} …

在我的 React 应用程序中，我无法停止从 Material UI TextField 传播键盘事件。

问题示例 -backspace在我的创作环境中按下文本字段内的键会触发删除操作。

关于 Material UI 组件的更改：

<TextField onChange={handleChange} />

我尝试停止传播：

<TextField onChange={handleChange} />

但这并不能阻止我的其他事件侦听器触发：

const handleChange = event => {
  event.stopPropagation();
  // ...
};

最终没什么大不了的，因为我可以将 keydown 监听器的范围从它想要使用的元素更改document为canvas它想要使用的元素，但很好奇这里是否有建议。

var Vote = React.createClass({
    onVote(event){
      console.log("event triggered");
      event.stopPropagation();
      event.nativeEvent.stopImmediatePropagation();
    },

    render: function() {
     return <div>
      <ul>
       <li onClick={this.onVote}>
        <input 
        type="radio" 
        name="vote_for_president" 
        value="donald"
        onChange={this.onVote}/>
        Donald
    </li>
    <li onClick={this.onVote}>
        <input type="radio" 
      name="vote_for_president" 
      value="clinton"
      onChange={this.onVote}
      />Clinton
    </li>
  </ul>
 </div>;
 }
});

我需要在单击列表项和更改单选按钮时触发一个事件，并执行相同的操作。这里的问题是当我单击无线电输入并且事件传播到列表项的单击事件时，事件被调用两次。停止传播和本机停止方法不起作用。

这里的目的是我希望整个 li 行都是可点击的，并且在单击单选按钮时不应两次调用事件。

这是 jsfiddle https://jsfiddle.net/dbd5f862/

我正在尝试在 React JS 中创建一个模态

我有一个外部 div，它是整个身体，而我有一个内部 div。如果在内部 div 之外单击它，我想应用该函数来关闭模态。

我的代码如下：

popupOutterDivStyle() {
    return {
        zIndex: 10000,
        position: "fixed",
        width: "100%",
        height: "100%",
        top: 0,
        left: 0,
        background: "rgba(102,102,102,0.8)"
    }
}

popupInnerDivStyle() {
    return {
        zIndex: 20000,
        position: "fixed",
        width: "70%",
        top: "50%",
        left: "50%",
        height: "400px",
        marginTop: "-200px", /*set to a negative number 1/2 of your height*/
        marginLeft: "-35%", /*set to a negative number 1/2 of your width*/
        background: "rgba(255,255,255,1)",
        display: 'block'
    }
}

closePopupIcon() {
    return {
        position: "absolute", …

我有一个单元格渲染器，它返回行上的名称属性和对象：

const nameRenderer = ({ value, data }) => {
    const { id: queueId } = data;
    return (
      <Box>
        <div className="row-hidden-menu">
            <IconButton
              icon="menu"
              onClick={({ event }) => {
                event.preventDefault();
                event.stopPropagation();
                onMenuClick();
              }}
            />
        </div>
      </Box>
    );
  };

我遇到的问题是我有一个onRowClick函数，但我不希望当我单击nameRenderer. 现在，当菜单打开时，onRowClicked事件将导航到新页面。

我正在尝试创建一个具有事件侦听器的 TypeScript React 组件。但是，当我这样做时，我收到以下错误消息：

TS2345：“(event: React.MouseEvent) => void”类型的参数不可分配给“EventListenerOrEventListenerObject”类型的参数。

我是否缺少某种类型的检查？谢谢。您可以在下面看到组件代码。

样本组件.tsx：

import * as React from 'react';

interface MyState {
  onClick: boolean;
}

export default class SampleComponent extends React.Component<{}, MyState> {
  private divRef: React.RefObject<HTMLDivElement>;

  public constructor() {
    super({});
    this.state = {
      onClick: false,
    };
    this.divRef = React.createRef();
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  public componentDidMount(): void {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  public handleClickOutside(event: React.MouseEvent<HTMLElement>): void {
    if (
      this.divRef.current.contains(event.target as Node)
    ) {
      this.setState({ onClick: true });
    }
  }

  public render(): React.ReactElement {
    return …