2018-09-10 16:13:08 w799766 阅读数 7240
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

直接看栗子:
这里写图片描述
页面上3个div,如图所示
1、在没有涉及到原生事件注册只有react事件时,用e.stopPropagation()阻止冒泡,代码如下:

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  handleClickTestBox = (e) => {
    console.warn('handleClickTestBox: ', e);
  }

  handleClickTestBox2 = (e) => {
    console.warn('handleClickTestBox2: ', e);
  }

  handleClickTestBox3 = (e) => {
    e.stopPropagation();
    console.warn('handleClickTestBox3: ', e);
  }

  render() {
    return (
      <div
        className="test-box"
        onClick={this.handleClickTestBox}
      >
        <div
          onClick={this.handleClickTestBox2}
        >
          <div
            onClick={this.handleClickTestBox3}
          >
          </div>
        </div>
      </div>
    );
  }
}

export default App;

控制台打印:
这里写图片描述
成功阻止事件的冒泡

2、当用document.addEventListener注册了原生的事件后,用e.stopPropagation()是不能阻止与document之间的冒泡,这时候需要用到e.nativeEvent.stopImmediatePropagation()方法,代码如下:

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  componentDidMount() {
    document.addEventListener('click', this.handleDocumentClick, false);
  }

  handleDocumentClick = (e) => {
    console.log('handleDocumentClick: ', e);
  }

  handleClickTestBox = (e) => {
    console.warn('handleClickTestBox: ', e);
  }

  handleClickTestBox2 = (e) => {
    console.warn('handleClickTestBox2: ', e);
  }

  handleClickTestBox3 = (e) => {
    // 阻止合成事件的冒泡
    e.stopPropagation();
    // 阻止与原生事件的冒泡
    e.nativeEvent.stopImmediatePropagation();
    console.warn('handleClickTestBox3: ', e);
  }

  render() {
    return (
      <div
        className="test-box"
        onClick={this.handleClickTestBox}
      >
        <div
          onClick={this.handleClickTestBox2}
        >
          <div
            onClick={this.handleClickTestBox3}
          >
          </div>
        </div>
      </div>
    );
  }
}

export default App;

这里写图片描述

3、阻止合成事件与非合成事件(除了document)之间的冒泡,以上两种方式都不适用,需要用到e.target 判断, 代码如下:

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  componentDidMount() {
    document.addEventListener('click', this.handleDocumentClick, false);
    document.body.addEventListener('click', this.handleBodyClick, false);
  }

  handleDocumentClick = (e) => {
    console.log('handleDocumentClick: ', e);
  }

  handleBodyClick = (e) => {
    if (e.target && e.target === document.querySelector('#inner')) {
      return;
    }
    console.log('handleBodyClick: ', e);
  }

  handleClickTestBox = (e) => {
    console.warn('handleClickTestBox: ', e);
  }

  handleClickTestBox2 = (e) => {
    console.warn('handleClickTestBox2: ', e);
  }

  handleClickTestBox3 = (e) => {
    // 阻止合成事件的冒泡
    e.stopPropagation();
    // 阻止与原生事件的冒泡
    e.nativeEvent.stopImmediatePropagation();
    console.warn('handleClickTestBox3: ', e);
  }

  render() {
    return (
      <div
        className="test-box"
        onClick={this.handleClickTestBox}
      >
        <div
          onClick={this.handleClickTestBox2}
        >
          <div
            id="inner"
            onClick={this.handleClickTestBox3}
          >
          </div>
        </div>
      </div>
    );
  }
}

export default App;

控制台打印:
这里写图片描述

2019-04-19 18:08:04 zSY_snake 阅读数 1819
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

大概思路是,为document绑定一个点击事件,判断事件触发对象(e.target)是否是 or 在指定div内部。

首先需要了解两个知识点:

  1. React ref属性
  2. Node.contains()

利用ref属性获取div节点

constructor(){
    this.divElement = null;
}

render() {
    return(
        <div ref={ node => this.divElement = node}><div/>
    )
}

document添加点击事件

componentDidMount() {
        document.addEventListener('click', this.outDivClickHandler);   
    }

卸载document点击事件

componentWillUnmount() {
        document.removeEventListener('click', this.outDivClickHandler);
    }

利用Node.contains()判断触发对象

outDivClickHandler(e) {
        const target = e.target;
        // 组件已挂载且事件触发对象不在div内
        if( this.divElement  && target !== this.menu && !this.divElement.contains(target)) {

            //do...

        }  
    }

 

2018-07-07 14:37:56 hannah1116 阅读数 1276
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

 var TestClickComponent = React.creatsClass({

    handleClick: function(event){

    //操作DOM节点

        var msg = React.findDOMNode(this.refs.tip);

         if(msg.style.display === 'none'){

            msg.style.display = 'inline';

        }else{

            msg.style.display = 'none';

        }
        //阻止事件的冒泡和默认行为

        event.stopPropagation();

        event.preventDefault();

    },

    render: function(){

        return(

            <div>

                <button onClick={this.handleClick}>显示/隐藏</button>

                <span ref="tip">message</span>

            </div>

        );

    }

});

var TestInputComponent = React.createClass({

    getInitialState: function(){

        return{

            inputContent: ' '
        }

    },

    changeHandler:function(event){

      //改变state的值

        this.setState({

            inputContent:event,target.value

        });

        event.preventDefault();

        event.stopPropagation();

    },

    render: function(){

        return(

            <div>

                <input type="text" onChange={this.changeHandler}/>
                <span>{this.state.inputContent}</span>

            </div>

        );

    }

});

2018-11-07 13:57:40 xutongbao 阅读数 5830
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 点击按钮显示div与隐藏div</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 type="text/css">
      .m-test{width: 100px;height: 100px;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,
            dispaly: 'block'
          };
 
          // 这个绑定是必要的,使`this`在回调中起作用
          this.handleClick = this.handleClick.bind(this);
        }
 
        handleClick() {
          this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn,
            display: prevState.isToggleOn ? 'none': 'block'
          }));
        }
 
        render() {
          return (
            <div>
              <button onClick={this.handleClick}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
              </button>
              <div className="m-test" style={{display: this.state.display}}></div>
            </div>
          );
        }
      }
 
      ReactDOM.render(
        <Toggle />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

 

 

 

 

 

2019-05-15 08:48:36 weixin_44889992 阅读数 10
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

原生js — 事件

  1. 事件概念
  2. 构成
  3. 谁触发: DOM
  4. 事件触发的形式: on addEventListener
  5. 事件类型: click keyup keydown
  6. 事件处理程序
  7. 事件对象
  8. 事件传参
var box = doucment.querySelector( 'div' )
box.onclick = function(){
//事件处理程序
}

React – 事件

  1. 写法一共四种,我们推荐有两种
  2. 箭头函数
class App extends React.component{
change = () => {}
}
  1. 在constructor函数中bind this
class App extends React.component{
constructor () {
super()
this.change = this.change.bind( this )
}
change () {
this.setStatge({})
}
}
  1. 事件对象 e
  • React中的事件对象不是浏览器提供的, 而是内部自己构建的
  • React的事件对象的中除了方法以外,其他值都是null,但是使用方式和浏览器中事件对象一致,也可以直接使用
  1. 事件参数
  2. 形式参数
  3. 实际参数
    注意:
    1. React中如果直接在实例方法后面跟() , 那么实例方法就会自动运行
    2. 实际参数的传递需要使用bind 绑定
    <div> { this.change.bind( this, arg1, arg2 ) } </div>
    
  • 在render里调用方法的地方外面包一层箭头函数
  • 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递
  • 通过event传递
  • 比较推荐的是做一个子组件, 在父组件中定义方法,通过props传递到子组件中,然后在子组件件通过this.props.method来调用
  1. 补充: label
    举例:
    以下那几项是您的兴趣爱好?
    篮球 【】
label使用
1. 和 表单元素 绑定 , 执行一定效果,比如上面的案例
2. 修改表单元素的默认样式,代替表单元素
<label>
<input type= 'checkbox' className='checkbox' />
</label>

label{
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 30px;
    border: 1px solid red;
 }
label input {
    display: none;
}

React native 内使用div等html标签

博文 来自: qq_41915690

React4 事件处理

阅读数 83

React事件

阅读数 9

没有更多推荐了,返回首页