美文网首页
React 之事件处理

React 之事件处理

作者: 甘道夫老矣 | 来源:发表于2019-03-28 14:54 被阅读0次

一,认识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
        })
    }
}

相关文章

  • 2018-11-07 react 事件处理

    react事件处理和dom事件处理是相似的。 react: Dom: 所以: React事件绑定属性的命名采用驼峰...

  • react文档——事件处理

    事件处理 React 元素的事件处理和 DOM 元素的事件处理非常相似。但也有一些语法差异: React 事件使用...

  • React 事件处理机制

    React在处理事件和HTML中JS处理事件不同,本文介绍React中的事件处理机制。React中不同通过返回fa...

  • React基础(6) -- 事件处理

    React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑...

  • ReactJS_06 React 事件处理

    React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑...

  • React 事件处理

    React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑...

  • react随笔5 事件处理

    事件处理 React元素的事件处理和DOM元素的事件处理很相似,但是有一点语法上的不同: React事件绑定属性的...

  • React事件绑定this的几种方法

    React事件处理函数绑定this的集中方法 Follow me on GitHub React事件处理函数绑定t...

  • 学习笔记:React事件处理

    一、React 事件处理 React 元素的事件处理和 DOM 元素类似,但是有一点语法上的不同。 React 事...

  • 5.Handing Event(处理事件)

    React版本:15.4.2**翻译:xiyoki ** 使用React元素处理事件与处理DOM元素上的事件非常相...

网友评论

      本文标题:React 之事件处理

      本文链接:https://www.haomeiwen.com/subject/fwaojqtx.html