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>
    );
}

三、参考链接:
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容