react怎么加click事件?

React添加事件,和DOM上添加事件类似,但又有细微的不同.

React添加事件,需要注意:

1.React的事件命名采用小驼峰(camelCase)的命名方式,DOM采用的是纯小写的方式;

2.使用JSX语法时,需要传入一个函数作为事件的处理函数,DOM传入的是一个字符串(虽然DOM中传入的事件名称也可以是函数名称,但数据类型还是一个字符串)

DOM元素添加事件

<a href="#" onclick="testClick();">点击我</a>

React中添加事件

<button onClick={this.testClick}>点击我</button>

React中不能通过返回false来阻止元素的默认行为,只能通过显示的设置preventDefault()来阻止默认的行为,而DOM中阻止元素默认行为的方式有两种:一种是内联脚本直接返回false,另外一种是事件处理函数中显示调用preventDefault方法.

DOM中阻止默认行为的方式:

<a href="http://www.baidu.com" onclick="return false;">点击我</a>

这种内联到HTML中的方式,可以通过直接返回false的方式阻止a元素默认行为跳转,也可以通过在响应事件中显示调用preventDefault方法.如:

<!--注意传入的参数需要是固定的event,不能修改为其他的值-->
<a href="http://www.baidu.com" onclick="testClick(event);">点击我</a>
<script>
    function testClick(e) {
        console.log("处理一些其他事情");
        e.preventDefault();
    }
</script>

React中阻止元素默认行为的方法:

testClick(e){
    console.log("处理些其他事情");
    e.preventDefault();
}
<a href="http://www.baidu.com" onClick={this.testClick}>点击我</a>

事件处理函数中不需要传入任何参数.

React中元素绑定事件

主要有个this的指向问题,在以类的继承方式定义的组件中,事件处理函数中的this并不是指向当前的组件.如果我们直接在React元素中使用this就会报异常,因为this并不是指向该组件.那么我们就需要手动的将this指向到当前组件,才可以使用this,将this绑定到当前组件常用的方法有4中:

1.通过箭头函数

<a href="http://www.mop.com" onClick={(e) => this.testClick(e)}>点击我</a>

2.将事件处理函数使用箭头函数的方法来写

testClick = (e) => {
    console.log("处理点事情");
    e.preventDefault();
}
<a href="http://www.baidu.com" onClick={this.testClick}>点击我吧</a>

3.在调用的地方绑定通过bind绑定;

<a href="http://www.baidu.com" onClick={this.handleClickEvent.bind(this)}>点击我</a>

4.在构造函数constructor中提前绑定;

constructor(props) {
        super(props);
        this.state = {
            name: this.props.name,
            date: new Date(),
            id: this.props.id
        };
        this.handleClickEvent = this.handleClickEvent.bind(this);
    }

<a href="http://www.baidu.com" onClick={this.handleClickEvent}>点击我吧</a>

向事件处理函数传递参数

很多操作中,我们都需要向事件的处理函数传递参数,如在删除或标记一条数据的时候,需要把当前数据的ID传递给事件处理函数,让它知道去处理哪条数据.

常用的传递数值的方式有两种:

1.箭头函数的方式

delUser(id, e){
    console.log(id);
}
<a href="http://www.baidu.com" onClick={(e) => this.delUser(this.state.id, e)}>删除</a>

2.通过bind向监听函数传参,需要注意在类组件中定义的监听函数,事件对象e要在传递参数的后面

delUser(id, e){
    console.log(id);
}
<a href="http://www.baidu.com" onClick={this.delUser.bind(this, this.state.id)}>删除</a>

其实无论是使用箭头函数,还是通过bind绑定监听事件的方式传参,事件响应函数中事件对象e,在参数列表中都是排在最后.

goRenren(id,name, e){
    console.log(id);
    console.log(name);
}
<button onClick={(e) => this.goRenren(this.state.id,this.state.name, e)}>删除</button>

以上就是react怎么加click事件?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    字符库快捷键|字符串快捷键

    字符库快捷键|字符串快捷键,,1. 字符串快捷键1、单行注释单行注释是 #Mac的快捷键是 command+/windows的快捷键是 Ctrl + /2、多行注

    excel常用函数都有哪些?

    excel常用函数都有哪些?,函数,哪些,常用,1、SUM函数:SUM函数的作用是求和。函数公式为=sum()例如:统计一个单元格区域:=sum(A1:A10)  统计多个

    确定java按钮响应事件的代码

    确定java按钮响应事件的代码,,* 阅读本文可以结合最后在java登录窗口界面下面是一个链接。 是定义的容器。 容器(CP =得到内容面板); / /

    90后瓶门事件图片

    90后瓶门事件图片,,现在孩子们还太早,有些女孩子总是在门口等一会儿,最近发生了一次酒瓶门事件。 近日,山东一家寄宿学校的一名女生带着一瓶