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}
            });
        }
    }
    
  • 相关阅读:
    Codeforces 231E
    Practice 15.07.07 计算几何
    Codeforces 552E
    Topcoder SRM 661 (Div.1) 250 MissingLCM
    HDU 4971
    Codeforces Round #306 (Div. 2)
    URAL 1988
    URAL 2032
    ServiceStack.Ormlit 事务
    ServiceStack.Ormlit 使用Insert的时候自增列不会被赋值
  • 原文地址:https://www.cnblogs.com/QxQstar/p/7530377.html
Copyright © 2011-2022 走看看