React事件处理

Posted 2020-11-03 juxiu

事件处理

React元素的时间处理和DOM元素的很相似。但是有一点语法上的不同；

• React时间绑定属性的命名采用驼峰式写法，而不是小写。
• 如果采用JSX的语法，你需要传入一个函数作为时间处理函数，而不是一个字符串（DOM元素的写法）

例如，传统的html：

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

React中稍有不同：

<button onClick={事件处理函数}>
    Activate Lasers
</button>

在React中另外一个不同是你不能使用返回false的方式组织默认行为。你必须明确使用preventDefault。例如，传统的HTML中阻止链接默认打开一个新页面，你可以这样写：

<a href="#" onclick="console.log(‘The link was clicked.‘); return false">
  Click me
</a>

而在React中，应该这样写：

function ActionLink(){
    function handleClick(e){
        e.preventDefault();
        console.log(11111)
    }
    return(
        <a  href="#" onClick={handleClick}>
            Click me
        <a/>
    )
}

在这里，e 是一个合成事件。React 根据 W3C spec 来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。查看 SyntheticEvent 参考指南来了解更多。

使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。

当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。例如，下面的 Toggle 组件渲染一个让用户切换开关状态的按钮：

class  Toggle extends React.Component{
    constructor(props){
        super(props);
        this.handelClick= this.handelClick.bind(this);
    }
    
    handelClick(){
        this.setState(prevState=>({
            isToggleOn:!prevState.isToggleOn
        }))
    }
    
    render(){
        return(
            <button onClick={this.handleClick}>
                {this.state.isToggleOn? ‘ON‘:‘OFF‘}
            </button>
        )
    }
}

ReactDOM.render(
    <Toggle />,
    document.getElementById(‘root‘)
);

你必须谨慎对待JSX回调函数中的this，类的方法默认是不会绑定this的。如果你忘记绑定this.handleClick并把它传入onClick，当你调用这个函数的时候，this的值会是unde.

这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。