react事件

发表于 | 分类于

事件处理

React 元素的事件处理和 DOM元素很相似，主要有两点不同：

  • React事件绑定属性的命名采用驼峰式写法，而不是小写
  • 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)
1
2
3
4
5
6
//DOM元素
<button onclick="test()"></button>


//react
<button onClick={test}></button>

写个小例子：

1
2
3
4
5
6
7
8
9
10
11
12
class Demo extends React.Component{

         show(){
             alert('hello')
         }

          render(){
              return <button onClick={this.show}>点击</button>
          }
      }

ReactDOM.render(<Demo/>,app)

上例中，当点击按钮时，调用 show函数，注意要用this调用，this指向组件本身。关于this，来单独说下。

this

我们来改变一下上面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Demo extends React.Component{
       constructor(){
           super()
           this.state = {
               val:0
           }
       }

        show(){
            this.setState({
                val:this.state.val+1
            })
        }

         render(){
             return <div>
                      <button onClick={this.show}>点击</button>
                      <p>{this.state.val}</p>
                    </div>

         }
 }

此例中，我们为组件添加状态，并显示在页面中，当点击按钮时，状态的数值加1。不过运行的结果可能不会如意，报一个错误：

1
...Cannot read property 'setState' of undefined

提示setState未定义，为了验证，我们在show函数里打印一下this，结果显示时 undefined。到这里，其实我开始也是比较迷惑的，函数里的this指向undefined还是第一次见。

在查看文档后才知道，原来在react里，类的方法默认是不会绑定 this 的，也就是说我们必须手动绑定this。绑定到哪？我们的一切操作都是基于这个组件的，所以应该绑定到当前类上。怎么绑定？直接在JSX 回调函数上绑定，如下：

1
<button onClick={this.show.bind(this)}>点击</button>

这里的this还是指向当前类的，只是类的方法不会默认绑定this而已。

默认行为和事件冒泡

说到事件，就不得不说默认行为和事件冒泡，因这两点在react里也有些不同。

取消默认行为

在react里，必须明确的使用 preventDefault来取消默认行为，像return false是没用的。

写个例子，阻止a标签的跳转：

1
2
3
4
5
6
7
8
handleClick(e){
        e.preventDefault()
        console.log('hello')
}

render(){
  return <a href="https://www.baidu.com" onClick={this.handleClick}>点击</a>
}

事件冒泡

在react里，使用e.stopPropagation()阻止事件冒泡可能会没效，因为这里的冒泡分为三种情况，情况不同方法也不同，在这里我找到一篇文章，说的很详细，我就不多啰嗦了，其实是偷懒，哈哈~
传送门