react常見幾種事件宣告
react常見的幾種事件宣告
第一種方式:箭頭函式宣告
import React from 'react';
class Login extends React.Component {
constructor() {
super();
this.state = {}
}
//箭頭函式方式
onFinish = values => {
console.log('Success:', values);
};
onFinishFailed = errorInfo => {
console.log('Failed:', errorInfo);
};
render() {
return <div>
<div className="but1"
onFinish={onFinish} onFinishFailed={onFinishFailed}>點選</div>
<div className="but2"
onFinish={()=>this.onFinish} >點選</div>
</div>
}
}
第二種方式:建構函式中宣告
import React from 'react';
class Login extends React.Component {
constructor() {
super();
this.state = {};
this.onFinish=this.onFinish.bind(this);
}
onFinish(){
console.log('點選了')
}
render() {
return <div className="login" onFinish={this.onFinish}></div>
}
}
第三種:bind()繫結
import React from 'react';
class Login extends React.Component {
constructor() {
super();
this.state = {};
}
onFinish(){
event.preventDefault() // 阻止預設行為
event.stopPropagation() // 阻止冒泡
console.log('點選了')
}
render() {
return <div className="login" onFinish={this.onFinish.bind(this)}></div>
}
}
react事件傳引數
react事件傳參主要有兩種方式:bind和es6箭頭函式
第一種:
通過 bind 方法來繫結引數,第一個引數指向 this,第二個引數開始才是事件函式接收到的引數:
<button onClick={this.handleClick.bind(this, props0, props1, …}>
handleClick(porps0, props1, …, event) {
// your code here
}
事件:this.handleclick.bind(this,要傳的引數)
函式:handleclick(傳過來的引數,event)
第二種通過es6進行傳參
import React from "react";
class Toggle extends React.Component{
constructor(props){
super(props);
this.state={}
this.handleClick=this.handleClick.bind(this)
}
/**引數傳值 *///事件物件e要放在最後
handleClick3(item,e){
e.preventDefault();
console.log('傳參1:',item,e)
}
handleClick4(item,e){
e.preventDefault();
console.log('傳參2',item,e)
}
render(){
return(
<div>
<button onClick={this.handleClick3.bind(this,'你好')}>
<button onClick={(e)=>this.handleClick4('你好',e)}>第二種事件傳參</button>
</div>
)
}
}
export default Toggle;
相關文章
- 幾種常見的NO SQL DBSQL
- Vim常見模式有幾種?模式
- React事件繫結幾種方法測試React事件
- iOS常見的幾種加密方法iOS加密
- 幾種常見的CSS佈局CSS
- 常見的幾種設計模式設計模式
- MySQL中幾種常見的日誌MySql
- 幾種常見取樣方法及原理
- redis常見的幾種使用場景Redis
- 幾種常見排序演算法總結排序演算法
- 幾種常見的微服務架構方案微服務架構
- Vue2 幾種常見開局方式Vue
- 幾種常見的JSP中文亂碼JS
- 幾種常見MySQL無法啟動案例MySql
- python 幾種常見的測試框架Python框架
- 常見等待事件事件
- 幾種常見的DDOS攻擊應對策略
- 幾種常見的JS遞迴演算法JS遞迴演算法
- 幾種常見的軟體開發模型分析模型
- 前後端常見的幾種鑑權方式後端
- 35.幾種常見的排序演算法排序演算法
- 幾種常見網路抓包方式介紹
- 用Flex實現常見的幾種佈局Flex
- 網路安全——常見的幾種WEB攻擊:Web
- 【開發經驗】幾種常見的加密方式加密
- 幾種常見的Python資料結構Python資料結構
- 幾種常見的排序演算法總結排序演算法
- 幾種常見的濾波演算法(轉)演算法
- 幾種常見的資料庫連線方法資料庫
- 幾種常見移動導航模式詳析模式
- 【等待事件】ORACLE常見等待事件事件Oracle
- 常見 React 面試題React面試題
- ORACLE 常見等待事件Oracle事件
- oracle常見等待事件Oracle事件
- 介紹幾種MySQL常見的圖形化工具MySql
- 幾種常見的Vue元件間的傳參方式Vue元件
- DNS故障的幾種常見原因及解決方法DNS
- 幾種常見的延遲執行處理方式