React--事件处理

最新推荐文章于 2022-06-14 14:30:19 发布

往前的

最新推荐文章于 2022-06-14 14:30:19 发布

阅读量358

点赞数

分类专栏： React 文章标签： React 事件 event dom

本文链接：https://blog.csdn.net/m0_37355951/article/details/72853097

版权

React 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

概述：

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

主要分两点：

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

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

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

1.例子如下：HTML下

<button οnclick="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有点麻烦。