React——event

最新推荐文章于 2024-05-03 22:26:54 发布

weixin_30699741

最新推荐文章于 2024-05-03 22:26:54 发布

阅读量343

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/QxQstar/p/7530377.html

版权

1.绑定在React元素上的事件与绑定在DOM元素上的事件非常相似，但是也有一个不同的地方

React事件使用驼峰命名法命名

//在HTML中
<button οnclick='handle()'></button>
 //在React中
<button onClick={handle}></button>

在React中不能通过使用return false阻止事件的默认行为，必须显示的调用event.preventDefault()去阻止默认行为

function ActionLink(){
  function handle(event){
    event.preventDefault();
  }
  return <a href='#' onClick={handle}>link me</a>
}

2.React中的event。

react合成了事件对象，所以不需要考虑跨浏览器兼容的问题。在React中，通常当元素被创建之后，你不需要调用addEventListener
为元素添加事件的监听器，而是在元素最初被渲染的时候添加监听器

3.当使用类形式创建一个组件，事件处理程序通常是作为对象中的一个方法。

class ToggleButton extend React.Component{
    constructor(props){
        super(props);
        this.state = {swtich:false};
        // 为了在handleClick中还能访问到this
        this.handleClick=this.handleClick.bind(this);
    },
    render(){
        return <button onClick={this.handelClick}>switch</button>
    },
    handleClick(event){
        this.setState((prevStart) => {
            return {swtich:!prevStart.swtich}
        });
    }
}

转载于:https://www.cnblogs.com/QxQstar/p/7530377.html