我有一个如下所示的基本组件。
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 中完成此操作?
最佳答案
在您的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 所说的是真的,因此我更新了答案。
关于javascript - 在 React 中点击可点击组件的外部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39538696/