Question

我有一个基本组件，如下所示。

class List extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      selected: null,
      entities: new Map([
        [0, { 'name': 'kot'} ],
        [1, { 'name': 'blini'} ]
      ])
    };
  }
  render() {
    return (<div>
      <ul>{this.renderItems()}</ul>
    </div>)
  }
  renderItems() {
    return Array.from(this.state.entities.entries()).map(s => {
      const [ id, entry ] = s;
      return <li
        key={id}
        onClick={() => this.setState(state => ({ selected: id }))}
        style={{
          color: id === this.state.selected ? 'red' : 'black'
        }}
      >{entry.name}</li>
    })
  }
}

这样可以让我点击任何元素并选择它。所选元素将显示为红色。 codepen for easy editing

但是，如果发现某个点击事件不是这些<li>元素之一，我想要取消设置任何当前所选项目的行为。

如何在React中完成？

Answer 1

在List组件中，您可以添加

  componentDidMount() {
    window.addEventListener("click", (e) => {
      let withinListItems = ReactDOM.findDOMNode(this).contains(e.target);
      if ( ! withinListItems ) {
        this.setState({ selected: null });  
      }
    });
  }

在您的renderItems中，将onClick更改为

onClick={ (e) => {
    // e.stopPropagation();
    this.setState({ selected: id });
  }
}

您可以查看此代码集http://codepen.io/anon/pen/LRkzWd

编辑：

@kubajz 说的是真的，因此我更新了答案。

Answer 2

随机用户的答案是正确的，它可能有一个缺陷 - 它依赖于event.target并且某些代码可能不再按预期工作 - 想象一下收集用户的内容页面上的行为和某处发送指标 - stopPropagation将阻止冒泡，因此不会记录点击。替代方法是检查data: '{tech_notes:\'' + $("#tech_notes").val() + '\', ticket_id: \'' + $("#ticket_id").val() + '\' }',：http://codepen.io/jaroslav-kubicek/pen/ORXxkL

中点击的内容

此外，还有一个很好的实用程序组件可用于监听文档级别：react-event-listener

在React

2 个答案:

编辑：