React 在body上绑定事件以及阻止事件冒泡

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>React 在body上绑定事件以及阻止事件冒泡</title><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script><style>html{height: 100%;}body{height: 100%;background-color: rgba(0,0,0,0.2);}.m-outer{background-color: red;}</style>
</head><body><div id="root"></div><script type="text/babel">class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// 这个绑定是必要的，使`this`在回调中起作用this.handleClick = this.handleClick.bind(this);}componentDidMount() { document.body.addEventListener('click', e => { if (e.target && e.target.matches('#m-btn')) { return; }             console.log('body');});             } componentWillUnmount() { document.body.removeEventListener('click');}                handleClick() {this.setState(prevState => ({isToggleOn: !prevState.isToggleOn}));}render() {return (<button onClick={this.handleClick} id="m-btn">{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}}ReactDOM.render(<Toggle />,document.getElementById('root'));</script>
</body></html>

转载于:https://www.cnblogs.com/xutongbao/p/9924745.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/412895.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！