React 之事件处理

一,认识React 事件中写法为

import React, { Component } from 'react'
class ChildrenTwo extends Component {
handleClick=(e)=>{
    e.preventDefault();
    console.log('链接被点击');
}
    render () {
        return (
        <div>
          <button onClick={activateLasers}>
          激活按钮
        </button>
            <h1>子组件2</h1>
          //如果你需要用a标记的话肯定会有个默认跳转,
         <a href="#" onClick={handleClick}>
          激活按钮
          </button
         </a>
        )
    }
}
export default ChildrenTwo

注意:你必须谨慎对待 JSX 回调函数中的 this,
这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法,你可以使用属性初始化器来正确的绑定回调函数:

(感觉这种方法好用一点点,es6的箭头函数,也是推荐的用法)
class Button extends React.Component {
  // 这个语法确保了 `this` 绑定在  handleClick 中
  // 这里只是一个测试
  handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

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

class Button extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
 
  render() {
    //  这个语法确保了 `this` 绑定在  handleClick 中,一般传参的话用这个,
    //      但是要防止加载时候就调用这个方法的问题
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

还有一种写法:


class Poker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { suit: 1 };
    this.handleHeart = this.handleHeart.bind(this);
  
  }
  handleHeart() {
    this.setState({ suit: (this.state.suit+1) });
  }
 render() {
            return <div onClick={this.onClickList}>点我点我点我</div>
  }
}

二,向事件中传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
两种方式是等价的。

--参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。
需要通过 bind 方法来绑定参数,第一个参数指向 this,第二个参数开始才是事件函数接收到的参数:

<button onClick={this.handleClick.bind(this, props0, props1, ...}></button>

handleClick(porps0, props1, ..., event) {
    // your code here
}
//事件:this.handleclick.bind(this,要传的参数)
//函数:handleclick(传过来的参数,event)

三.点击修改参数,赋值

class Home extends Component {
    constructor(props,context) {
        super(props,context)
        this.state = {
            clickbtn:"指标监测"
        }
    }
////错误
//this.state.clickbtn='React';
//但是异步的我不知道是不是这样写了;
//正确
    handle=(val)=>{
        this.setState({
            clickbtn:val.name
        })
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 12,462评论 2 35
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 10,125评论 0 5
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,688评论 1 33
  • $ 前言   最近在考虑框架转型,鉴于作为一名JSer,要时时刻刻保持对新技术和流行技术的敏感性,而 React、...
    果汁凉茶丶阅读 22,130评论 5 32
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 4,690评论 0 1