zoukankan      html  css  js  c++  java
  • React——event

    1.绑定在React元素上的事件与绑定在DOM元素上的事件非常相似,但是也有一个不同的地方

    React事件使用驼峰命名法命名

    //在HTML中
    <button onclick='handle()'></button>
     //在React中
    <button onClick={handle}></button>
    

    React中不能通过使用return false阻止事件的默认行为,必须显示的调用event.preventDefault()去阻止默认行为

    function ActionLink(){
      function handle(event){
        event.preventDefault();
      }
      return <a href='#' onClick={handle}>link me</a>
    }
    

     2.React中的event

    react合成了事件对象,所以不需要考虑跨浏览器兼容的问题。在React中,通常当元素被创建之后,你不需要调用addEventListener
    为元素添加事件的监听器,而是在元素最初被渲染的时候添加监听器

    3.当使用类形式创建一个组件,事件处理程序通常是作为对象中的一个方法。

    class ToggleButton extend React.Component{
        constructor(props){
            super(props);
            this.state = {swtich:false};
            // 为了在handleClick中还能访问到this
            this.handleClick=this.handleClick.bind(this);
        },
        render(){
            return <button onClick={this.handelClick}>switch</button>
        },
        handleClick(event){
            this.setState((prevStart) => {
                return {swtich:!prevStart.swtich}
            });
        }
    }
    
  • 相关阅读:
    关于MIME类型问题,浏览器请求到的资源是乱码
    关于vue切换用户,路由表不更新问题
    Flutter环境安装,ios真机调试
    vue使用trackingjs
    js的中文英文排序
    google无法播放mp4 chrome无法播放h264
    写在Blog前
    NOI2010Day1
    菜鸡KLC的中考游记
    ABC161 题解
  • 原文地址:https://www.cnblogs.com/QxQstar/p/7530377.html
Copyright © 2011-2022 走看看