React 在body上绑定事件以及阻止事件冒泡
生活随笔
收集整理的這篇文章主要介紹了
React 在body上绑定事件以及阻止事件冒泡
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!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`在回調(diào)中起作用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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/xutongbao/p/9924745.html
總結(jié)
以上是生活随笔為你收集整理的React 在body上绑定事件以及阻止事件冒泡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java BigDecimal去掉小数点
- 下一篇： getAndIncrement中使用ca