React的事件处理函数用法详解

一、简介

页面交互必然会伴随事件的发生，譬如HTML中的一个button被点击了一下，接下来页面应该怎么反应？就是需要button的onClick事件函数来处理。

---

二、使用方法

1、事件函数怎么写？

HTML标签 与 React元素，添加事件函数，分别怎么写？

// 传统HTML的  click  事件函数写法
< button onclick = "activateLasers()" >
    Activate Lasers
</button >

// React的  click  事件函数写法
< button onClick = { activateLasers } >
    Activate Lasers
</button >

2、事件函数怎么传参？

// 传递参数给时间处理函数，两种方式如下：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

3、preventDefault

HTML中阻止表单提交动作，只需要在提交事件里面 return false; 即可，React中则需要调用 preventDefault 函数。

// 传统HTML，用return false，来阻止表单提交
< form onsubmit = "console.log('You clicked submit.'); return false" >
    <button type="submit">Submit</button>
</form >

// React中，只能用preventDefault来阻止表单提交
function Form() {
    function handleSubmit(e) {
        e.preventDefault();
        console.log('You clicked submit.');
    }

    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Submit</button>
        </form>
    );
}

---

三、参考链接：

• React的事件处理函数用法详解！