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>
  • 相关阅读:
    LINQ -2015-04-27
    wireshark的安装
    c#中的classes和objects一些知识【1】
    初学C#,用vs去开始hello world!
    file_get_contents HTTP request failed! Internal Server Error
    验证码二(验证码使用)
    接口调用 POST
    接口调用 GET方式
    百度地图改标注样式
    Linux-常用命令
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924745.html
Copyright © 2011-2022 走看看