React--事件处理

概述：

React是整合HTML 和js混血儿，处理事件和DOM处理事件大致相同，只有的一些语法的差异

        主要分两点：

React 事件跟java的驼峰命名法，而DOM事件是小写

JSX对于处理函数是引用也就是（{}花括号括起来的），而DOM是字符串（“” 双引号或单引号）JSX对于字符串和函数引用进行区分

JSX不能直接返回false去改变默认行为，必须显式调用preventDefault函数

1.例子如下：HTML下

<button onclick="activateLasers()">  Activate Lasers</button>

React形式：

<button onClick={activateLasers}>  Activate Lasers</button>

2.对于链接取消默认行为

对于html

<a href="#" onClick="console.log('dadfa'); return false"> 求点</a>

对于React 发现它分开处理，函数和html分开

function Claa(){  function c(e){    e.preventDafault();    console.log('ddddddddd');  };  return (    <a href="#" onClick={c}>点我</a>  );}ReactDOM.render(  <Claa />,  document.getElementById('root'))

3.OFF 和ON相互切换

class Toggle extends React.Component{  //接受传入的参数，定义初始的参数  constructor(props){    super(props);    this.state={isToggleOn:true};    //绑定this表明handleClick需要this的值动态变化的    this.handleClick = this.handleClick.bind(this);  }  handleClick(){    //自动会去找element==state对于{}必须要()括起来    this.setState(element=>({      isToggleOn: !element.isToggleOn    }));  }  render(){    return (      //注意这里必须要用this.表示Toggle类下的方法      <button  onClick={this.handleClick}>        {this.state.isToggleOn ? "NO" : "OFF"}      </button>    );  }}ReactDOM.render(  <Toggle />,  document.getElementById('root'))

总结：1.以上分为四块部分，1.类初始化（定义状态相关的字段和为方法绑定this对象）

            2.触发函数 ：这里用了箭头函数，element相等于state

    3.html相关的  注意就是this.handleClick 而不是handleClick

    4.渲染展示

4.除了绑定this，还有其他方式处理

方式一：初始时候绑定函数

class LoggingButton extends React.Component {  // This syntax ensures `this` is bound within handleClick.  // Warning: this is *experimental* syntax.  constructor(props){    super(props);    this.handleClick = () => {    console.log('this is:', this);  }  }    render() {    return (      <button onClick={this.handleClick}>        Click me      </button>    );  }}ReactDOM.render(  <LoggingButton/>,  document.getElementById('root'))

方式二：如果你看箭头函数，其实你会发现利用绑定其本身的this

class LoggingButton extends React.Component {  handleClick() {    console.log('this is:', this);  }  render() {    // This syntax ensures `this` is bound within handleClick    return (      <button onClick={(e) => this.handleClick(e)}>        Click me      </button>    );  }}

总结：

 React分工明确的，DOM有点混乱，React绑定this有点麻烦。