javascript - 在 React 中点击可点击组件的外部

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 所说的是真的，因此我更新了答案。