React 之事件处理

一，认识React 事件中写法为

import React, { Component } from 'react'
class ChildrenTwo extends Component {
handleClick=(e)=>{
    e.preventDefault();
    console.log('链接被点击');
}
    render () {
        return (
        

          
          激活按钮
        
            
子组件2
          //如果你需要用a标记的话肯定会有个默认跳转，
         
          激活按钮
          
        )
    }
}
export default ChildrenTwo

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

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

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

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

还有一种写法：

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 
点我点我点我
  }
}

二，向事件中传递参数

 this.deleteRow(id, e)}>Delete Row
Delete Row
两种方式是等价的。

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

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
        })
    }
}