• react事件处理

    2017-05-04 14:09:59
    React事件使用驼峰命名法,而不是全部小写命名。 使用JSX你传递一个函数作为事件处理程序,而不是一个字符串。 例如,HTML: button onclick="activeLasers()"> Active Lasers button> 在React中

    事件处理

    使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异:

    • React事件使用驼峰命名法,而不是全部小写命名。

    • 使用JSX你传递一个函数作为事件处理程序,而不是一个字符串。

    例如,HTML:

    <button onclick="activeLasers()">
        Active Lasers
    </button>

    在React中略有不同:

    <button onClick={activateLasers}>
        Active Lasers
    </button>

    另一个区别是,你不能返回false来防止React中的默认行为。 您必须显式调用preventDefault。 例如,使用纯HTML,为了防止打开新页面的默认链接行为,您可以写:

    <a href="#" onclick="console.log('The link was clicked'); return false;">
        Click me
    </a>

    在React中,这可以改为:

    function ActiveLink() {
        function handleClick(e) {
            e.preventDefault();
            console.log('The link was clicked');
        }
    
        return (
            <a href='#' onClick={handleClick}>
                click me
            </a>
        );
    }

    这里,e是合成过的event。 React根据W3C规范定义这些event,因此你不需要担心浏览器兼容性的问题。 

    当使用React时,在创建后向DOM元素添加通常不需要调用addEventListener监听器。 相反,只是在最初渲染元素时提供事件监听器。

    当您使用ES6类定义组件时,常见的模式是将事件处理程序作为类上的公共方法。 例如,此Toggle组件呈现一个按钮,让用户在“ON”“OFF”状态之间切换:

    class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    
        // 这个绑定是必要的,要不然该事件中的this就会是当前实例
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
        }));
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
          </button>
        );
      }
    }
    
    ReactDOM.render(
      <Toggle />,
      document.getElementById('root')
    );

    你必须十分注意JSX中事件函数的意义。 在JavaScript中,类中的方法默认不绑定this。 如果你忘记绑定this.handleClick中的this关键字并将它传递给了onClick事件,当函数实际被调用时,会报出undefined的错误。

    这不是React中特定的行为; 它是JavaScript中函数正常工作的一部分。
    一般来说,如果你引用一个方法是后面没有(),如onClick = {this.handleClick},就会绑定该方法。

    如果调用bind会使你烦恼,有两种方法可以解决这个问题。 您可以使用属性初始值设定props来正确处理:

    class LoggingButton extends React.Component {
      // 使用剪头函数绑定this
      handleClick = () => {
        console.log('this is:', this);
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            Click me
          </button>
        );
      }
    }

    默认情况下,在Create React App中启用此语法。

    如果不使用属性初始化语法,可以在回调中使用箭头函数:

    class LoggingButton extends React.Component {
      handleClick() {
        console.log('this is:', this);
      }
    
      render() {
        // 给事件传入一个剪头函数也可以绑定this
        return (
          <button onClick={(e) => this.handleClick(e)}>
            Click me
          </button>
        );
      }
    }

    此语法的问题是,每次LoggingButton渲染时都会创建不同的回调函数。 在大多数情况下,这是要被罚款的。 然而,如果这个回调作为一个prop传递给较低的组件,这些组件可能会做额外的重新渲染。 我们一般建议在构造函数中绑定以避免这种性能问题。

    展开全文
  • 本文讨论React中,三种绑定事件回调的方式。第一种有额外的性能损失;第二种需要手动绑定this,代码量增多;第三种用到了ES7的特性,目前并非默认支持,需要Babel插件的支持,但是写法最为简洁,也不需要手动绑定...

    React中定义一个组件,可以通过React.createClass或者ES6的class。本文讨论的React组件是基于class定义的组件。采用class的方式,代码结构更加清晰,可读性强,而且React官方也推荐使用这种方式定义组件。

    处理事件响应是Web应用中非常重要的一部分。React中,处理事件响应的方式有多种。

    1.使用箭头函数

    先上代码:

    //代码1
    class MyComponent extends React.Component {
    
      render() {
        return (
          <button onClick={()=>{console.log('button clicked');}}>
            Click
          </button>
        );
      }
    }

    当事件响应逻辑比较复杂时,再把所有的逻辑直接写在onClick的大括号内,就会导致render函数变得臃肿,不容易直观地看出组件render出的元素结构。这时,可以把逻辑封装成组件的一个方法,然后在箭头函数中调用这个方法。如下所示:

    //代码2
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {number: 0};
      }
    
      handleClick() {
        this.setState({
          number: ++this.state.number
        });
      }
    
      render() {
        return (
          <div>
            <div>{this.state.number}</div>
            <button onClick={()=>{this.handleClick();}}>
              Click
            </button>
          </div>
        );
      }
    }

    这种方式最大的问题是,每次render调用时,都会重新创建一个事件的回调函数,带来额外的性能开销,当组件的层级越低时,这种开销就越大,因为任何一个上层组件的变化都可能会触发这个组件的render方法。当然,在大多数情况下,这点性能损失是可以不必在意的。这种方式也有一个好处,就是不需要考虑this的指向问题,因为这种写法保证箭头函数中的this指向的总是当前组件。

    2.使用组件方法

    代码先:

    //代码3
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {number: 0};
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        this.setState({
          number: ++this.state.number
        });
      }
    
      render() {
        return (
          <div>
            <div>{this.state.number}</div>
            <button onClick={this.handleClick}>
              Click
            </button>
          </div>
        );
      }
    }

    这种方式的好处是每次render,不会重新创建一个回调函数,没有额外的性能损失。需要注意的是,使用这种方式要在构造函数中为事件回调函数绑定this: this.handleClick = this.handleClick.bind(this),否则handleClick中的this是undefined。这是因为ES6 语法的缘故,ES6 的 Class 构造出来的对象上的方法默认不绑定到 this 上,需要我们手动绑定。每次都手动绑定this是不是有点蛋疼?好吧,让我们来看下一种方式。

    3.属性初始化语法(property initializer syntax)

    使用ES7的 property initializers,代码可以这样写:

    //代码4
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {number: 0};
      }
    
      handleClick = () => {
        this.setState({
          number: ++this.state.number
        });
      }
    
      render() {
        return (
          <div>
            <div>{this.state.number}</div>
            <button onClick={this.handleClick}>
              Click
            </button>
          </div>
        );
      }
    }

    哈哈,再也不用手动绑定this了。但是你需要知道,这个特性还处于试验阶段,默认是不支持的。如果你是使用官方脚手架Create React App 创建的应用,那么这个特性是默认支持的。你也可以自行在项目中引入babel的transform-class-properties插件获取这个特性支持。

    4.回调函数传参问题

    事件的回调函数默认是会被传入一个事件对象Event作为参数的。如果我想传入其他参数给回调函数应该怎么办呢?

    使用第一种方式的话很简单,直接传就可以了:

    //代码5
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          list: [1,2,3,4],
          current: 1
        };
      }
    
      handleClick(item,event) {
        this.setState({
          current: item
        });
      }
    
      render() {
        return (
          <ul>
            {this.state.list.map(
              (item)=>(
                <li className={this.state.current === item ? 'current':''} 
                onClick={(event) => this.handleClick(item, event)}>{item}
                </li>
              )
            )}
          </ul>
        );
      }
    }

    使用第二种方式的话,可以把绑定this的操作延迟到render中,在绑定this的同时,绑定额外的参数:

    //代码6
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          list: [1,2,3,4],
          current: 1
        };
      }
    
      handleClick(item) {
        this.setState({
          current: item
        });
      }
    
      render() {
        return (
          <ul>
            {this.state.list.map(
              (item)=>(
                <li className={this.state.current === item ? 'current':''} 
                onClick={this.handleClick.bind(this, item)}>{item}
                </li>
              )
            )}
          </ul>
        );
      }
    }

    使用第三种方式,解决方案和第二种基本一致:

    //代码7
    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          list: [1,2,3,4],
          current: 1
        };
      }
    
      handleClick = (item) =>  {
        this.setState({
          current: item
        });
      }
    
      render() {
        return (
          <ul>
            {this.state.list.map(
              (item)=>(
                <li className={this.state.current === item ? 'current':''} 
                onClick={this.handleClick.bind(undefined, item)}>{item}
                </li>
              )
            )}
          </ul>
        );
      }
    }

    不过这种方式就有点鸡肋了,因为虽然你不需要通过bind函数绑定this,但仍然要使用bind函数来绑定其他参数。

    关于事件响应的回调函数,还有一个地方需要注意。不管你在回调函数中有没有显式的声明事件参数Event,React都会把事件Event作为参数传递给回调函数,且参数Event的位置总是在其他自定义参数的后面。例如,在代码6和代码7中,handleClick的参数中虽然没有声明Event参数,但你依然可以通过arguments[1]获取到事件Event对象。

    总结一下,三种绑定事件回调的方式,第一种有额外的性能损失;第二种需要手动绑定this,代码量增多;第三种用到了ES7的特性,目前并非默认支持,需要Babel插件的支持,但是写法最为简洁,也不需要手动绑定this。推荐使用第二种和第三种方式。

    展开全文
  • react-native 调用原生...android调用react-nativ我使用的是事件的方式 1、react-native 注册事件 const {EventEmitterManager} = NativeModules; const tempEventEmitterManager = new NativeEventEmitter(Even...

    react-native 调用原生android的方法大家都知道,使用桥文件就可以搞定;
    android调用react-nativ我使用的是事件的方式

    1、react-native 注册事件

    const {EventEmitterManager} = NativeModules;
    const tempEventEmitterManager = new NativeEventEmitter(EventEmitterManager);
    
    this.remoteNoti = tempEventEmitterManager.addListener(
                'RemoteNoti',
                (e)=>this.androidComeFrom(e));
    
    

    2、android端发送事件 使用 WritableMap传递参数

    	
    	 //定义发送事件的函数
      public static void sendEvent(ReactContext reactContext, String eventName, WritableMap params)
      {
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,params);
      }
    
    展开全文
  • react 中安卓如何调用react的方法 有些时候我们需要把前端页面嵌入到app里,此时可能有些需要前端与app协同来实现一下操作,但是要如何实现呢?我们先来说安卓app如何调用js的方法,代码如下: componentDidMount() ...

    安卓如何调用react的方法

    有些时候我们需要把前端页面嵌入到app里,此时可能有些需要前端与app协同来实现一下操作,但是要如何实现呢?我们先来说安卓app如何调用js的方法,代码如下:

    componentDidMount() {
        window['方法名'] = (data) => {
         console.log(data)
        };
      }
    

    我们只有在钩子函数中把某个方法绑定到window对象上即可,至于安卓端如何配置自行查询。
    注意:想要在那个页面调用方法就在所对应的页面的钩子函数里绑定对应的方法,就相当于说是在页面加载的时候才创建了这个方法。同理安卓调用vue的方法也是。只不过在mounted中创建一个方法即可。

    展开全文
  • React Native 应用根组件的注册和调用 ,原理如下图: AppRegistry.registerComponent 接口将React ...当React Native启动时,原生平台会调用该组件,iOS工程中调用 React Native 组件的AppDelegate.m 代码为:

    React Native 应用根组件的注册和调用 ,原理如下图:



    AppRegistry.registerComponent 接口将React Native 平台的根组件 RNTransplant 注册到了原生平台上。当React Native启动时,原生平台会调用该组件,iOS工程中调用 React Native 组件的AppDelegate.m 代码为:



    展开全文
  • 某次被问到 React事件机制的问题,关于这一块我确实不怎么清楚,因为平时大部分工作都是用 Vue,对于 React的熟悉程度只限于会用,具体实现逻辑还真没专门学习过,但是总不能就说自己不清楚吧,好在我了解 Vue的事件...
  • 最近公司项目需要结合Android 加载H5 页面加快工作效率。前端页面采用目前比较流行的React...) 方式来找到React 的对象方法来调用。研究了一下React 的编译机制,如果webpack 打包的js生成bundle.js 这个js 中是一个...
  • 1 React合成事件特点React自己实现了一套高效的事件注册,存储,分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大化的解决了IE等浏览器的不兼容问题。与DOM事件体系相比,...
  • 首先这篇过程和上一篇混合开发之Android原生加载ReactNative页面的大部分步骤都是一样的 首先还是大概的讲一下...2、执行npm install –save react react-native 安装reactreact-native,这里要注意一下react-na...
  • 本文通过对React事件系统和源码进行浅析,回答“为什么React需要自己实现一套事件系统?”和“React的事件系统是怎么运作起来的?”两个问题。React为了性能和复用,采用了事件代理,池,批量更新,跨浏览器和跨平台...
  • 问题: 一个画图组件是用react做的,而页面是用vue来...先来了解下 生命钩子,需要在vue生命钩子的mounted里面调用react方法来绘制图形,可以在react代码里面暴露一个方法, //react app import App from './app/ko...
  • 出现问题:点击按钮二维码显示之后,在点击按钮,二维码一直显示,不会消失分析原因:React合成事件系统的委托机制,依赖事件的冒泡机制完成委派,在点击按钮时,同时触发了body上绑定的事件出错代码: class ...
  • var HelloMessage = React.createClass({ getDragonKillingSword: function(){ alert("OK"); }, render: function() { return Hello {this.props.name} OK } }); var ImDaddyComponent = React.crea
  • React组件事件响应React在构建虚拟DOM的同时,还构建了自己的事件系统;且所有事件对象和W3C规范保持一致。React事件系统和浏览器事件系统相比,主要增加了两个特性:事件代理、和事件自动绑定。1、事件代理区别于...
  • 本文仅用于帮助Android开发者对接RN项目 打开React Native项目 搭建React Native开发环境 使用Android Studio打开RN项目 下图是RN项目的目录结构: ...RN调用Android 新建class继承ReactContextBaseJavaM...
  • react调用摄像头拍照

    2019-11-16 14:47:43
    React调用摄像头拍照场景 在一些移动app的个人登陆页面往往有头像的地方,我们可以根据自己的喜好随意的更换我们的头像。那么在react-native的项目中如果轻松的实现这一功能,下面有一些简单的步骤。 React调用...
  • 之后在父组件中调用了子组件并增加了ref 可是我使用this.refs.子组件.某函数(),却找不到那个函数了 现在也百思不得其解,但是问题解决了,我是把子组件的函数直接暴露出来 解决方案: /** 子组件 */ @Form.create...
  • 事件处理程序(Event handlers)就是每当有事件被触发时决定要执行的动作或行为。 在 React 应用中,事件名使用小驼峰格式书写,意思就是 onclick 要写成 onClick。 React 实现的合成事件机制给 React 应用和接口带来...
  • 一,在React元素绑定事件要注意的两点 1,在React事件的命名采用驼峰命名法,而不是原生dom中的小写,如:onclick要写成onClick,onchange要写成onChange 2,响应事件的函数要以对象的形式赋值,而不是以dom字符串...
  • 转自:https://react.docschina.org/docs/handling-events.html 一、onClick后面的方法如何处理 1: 没有在方法后面添加 “()”,应该为这个方法在constructor中绑定this class Toggle extends Component { ...
1 2 3 4 5 ... 20
收藏数 66,534
精华内容 26,613