zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    华南师范大学应用数学考研真题
    scoped引起的deep与>>>改变elementUI的样式
    7.mogodb索引
    JS的undefined与null,==与===的区别
    vue上传图片到七牛云的思路与实现
    JS用正则处理文件名
    JS使用正则匹配字符串去掉多余符号
    6.mongoDB更新操作
    SSL证书相关之后缀名笔记
    vue一些常用的语法
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924745.html
Copyright © 2011-2022 走看看