文档

点击事件

react 中的点击事件和原生的点击事件很相似,只不过采用的是小驼峰的形式执行的,例如

  • 原生点击事件

    1. <div onclick="handleClick()">点击我</div>
    2. <script>
    3. function handleClick(){
    4.     console.log("点击事件")
    5. }
    6. </script>

    点击查看【codepen】

  • react点击
    ```jsx import React from “react”; functiontestClick { handleClickitem = (index) => { console.log(index); console.log(this); }; render() { return (

    1. <div className="left-bottom-container">
    2.     <div onClick={handleClickitem}>本月 </div>
    3. </div>

    ); } }

  2. - 区别
  3. 1. 使用小驼峰命名 `onClick` 
  4. 1. 使用大括号包裹 `  <div onClick={handleClickitem}>本月 </div>` 
  5. <a name="zeUYb"></a>
  6. ## 事件在类中使用
  7. ```jsx
  8. import React from "react";
  9. import Title from "@/components/Title";
  10. export default class LeftTop extends React.Component {
  11.   constructor(props) {
  12.     super(props);
  13.     this.state = {
  14.       isActive: true,
  15.       activeIndex: 0,
  16.     };
  17.     // this.handleClickitem = this.handleClickitem.bind(this);
  18.   }
  19.   handleClickitem = (index) => {
  20.     console.log(index);
  21.     console.log(this);
  22.   };
  23.   render() {
  24.     return (
  25.       <div className="left-bottom-container">
  26.         <Title text="预警发布统计">
  27.           <div
  28.             className={`solt-children ${this.state.isActive ? "active" : ""}`}
  29.             onClick={() => this.handleClickitem(0)}
  30.           >
  31.             本月
  32.           </div>
  33.           <div className="solt-children">本周</div>
  34.           <div className="solt-children">本日</div>
  35.         </Title>
  36.       </div>
  37.     );
  38.   }
  39. }

类中使用的 this 问题

在dom中点击默认 this 是 undefined ,如果想要获取 this ,可以这样做

  • 使用 bind 绑定 ```jsx import React from “react”; import Title from “@/components/Title”; export default class LeftTop extends React.Component { constructor(props) { super(props); // 使用bind绑定 this.handleClickitem = this.handleClickitem.bind(this); } handleClickitem () { console.log(index); console.log(this); }; render() { return (
    1.  <div  onClick={this.handleClickitem}> 本月 </div>
    ); } }
  1.  `bind` 还可以这样写
  2. ```jsx
  3.  <div  onClick={this.handleClickitem.bind(this,0)}> 本月 </div>
  • 使用箭头函数 ```jsx // 这个地方使用箭头函数 handleClickitem = (index) => { console.log(index); console.log(this); }; render() { return (
    1.  <div  onClick={this.handleClickitem}> 本月 </div>
    ); } }
  1.  箭头函数还可以这样写
  2. ```jsx
  3.  <div  onClick={()=>this.handleClickitem(0)}> 本月 </div>