React的onClick点击事件传参三种写法

1、<Button onClick={this.delFolder.bind(this,"abc")}></Button>

定义delFolder方法

delFolder = (name,e)=>{
	alert(name)
}

用bind绑定,调用是作为第二个参数传递,不用显示传递事件对象,定义方法时,事件对象作为最后一个参数传入

2、<Button onClick={this.delFolder("abc")}></Button>
定义delFolder方法

delFolder = (name)=>{
	return (e)=>{
    	console.log(e);
    	console.log(key);
	}
}

返回一个函数,事件对象在返回的函数中

3、<Button onClick={(e)=>this.delFolder("abc",e)}></Button>

delFolder = (name,e)=>{
	console.log(name,e)
}

事件对象作为第二个参数传递

### JSX 和 TSX 的参数递方式 在 React 中,JSX 和 TSX 都用于定义用户界面组件。然而,在处理属性和事件时存在一些细微差别。 对于原始 JavaScript 来说,在 JSX 语法中的应用非常简单[^1]。当涉及到对象或数组作为 props 或者事件处理器时,这些数据结构可以直接嵌入到 JSX 表达式中: ```jsx const obj = { key: 'value' }; <p data={obj}>{JSON.stringify(obj)}</p> ``` 而在 TSX 方面,由于 TypeScript 提供了静态类型检查功能,因此可以更严格地控制给子组件的数据类型。这意味着开发者可以在编译期发现潜在错误并获得更好的开发体验。TSX 支持同样的内联表达式写法递复杂类型的 prop: ```tsx interface MyComponentProps { items: string[]; } function MyComponent({items}: MyComponentProps) { return ( <ul> {items.map(item => ( <li>{item}</li> ))} </ul> ); } ``` 关于修饰符的使用上也有所不同。在某些情况下(例如 Vue.js),`v-on:` 指令后面跟的是原生 DOM 事件名称加上可选的修饰符;但是在 React/JSX 及其变体 TSX 中,则采用不同的约定——即移除前缀 `on`, 并将驼峰命名应用于剩余部分,并且不允许使用`.`分隔符而改用下划线 `_` 来表示特殊行为[^2]: ```html <!-- 不推荐 --> <p onClick.stop="handler()">Click me</p> <!-- 推荐 (React/JSX or TSX) --> <p onClick={(e) => e.stopPropagation(); handler()}>Click me</p> ``` 综上所述,虽然两者都支持相似的方式来进行参数递,但在具体实现细节上有各自的特点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值