React中事件傳參的寫法
最近在嘗試React,發現之前很多用jQuery就能輕鬆解決的事情,現在遇到了新的挑戰。當然這並不表示React不行,而是我還需要更多的研究和探索。React中的點選事件,想要傳引數給方法,始終不得要領,現在摸索出一套寫法,也許不是很完善,但先記錄下來,以備以後改進
class SchemeSwitcher extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
};
handleClick(event) {
console.log(event.target.dataset.index);
}
render() {
const listShows = appInfo.threeSchemeNameList.map((nameStr, index) => {
let classStr = (index === this.props.schemeIndex) ? 'selected' : '';
return (
<li className={classStr} key={index} data-index={index} onClick={this.handleClick}>{nameStr}</li>
)
});
return (
<ul className="switcher">
{listShows}
</ul>
);
};
}
其中:
<li className={classStr} key={index} data-index={index} onClick={this.handleClick}>{nameStr}</li>
雖然key是React必須傳的,但在元件中卻不能獲取;
想通過onClick={this.handleClick(index)}這樣的方式來直接傳引數,但試過了,不行,函式在渲染時就被執行了;
最後想到了用data-,可以了,不過寫法跟$(this).data(‘index’)不一樣哦。其實頁可以用jQuery,但既然是想嘗試新的東西,還是揚棄過去,使用js的原生寫法吧:event.target.dataset.index。
相關推薦
React中事件傳參的寫法
最近在嘗試React,發現之前很多用jQuery就能輕鬆解決的事情,現在遇到了新的挑戰。當然這並不表示React不行,而是我還需要更多的研究和探索。React中的點選事件,想要傳引數給方法,始終不得要領,現在摸索出一套寫法,也許不是很完善,但先記錄下來,以備以後
React路由傳參的三種方式 React中路由傳參及接收引數的三種方式
React中路由傳參及接收引數的三種方式 方式 一: 通過params  
React中路由傳參及接收引數的方式react-router-dom4.3.1
方式1:通過params 1.法一(在重新整理頁面的時候,引數不會丟失。) (1)路由表中 <Route path=' /user/:id ' component={User
react中onClick事件傳參
初心-楊瑞超個人部落格誠邀您加入qq群(IT-程式猿-技術交流群):757345416 在我們實際開發中,單擊事件傳參也是經常用到的,下面我們來研究下傳參問題。 正常繫結事件: <button className="clear-completed" onCli
elementUi中的計數器ele-mumber中的change事件傳參及事件調用
sum 彈出 屬性 bsp info 業務 沒有 彈出層 這一 業務場景是需要在點擊業務工作量的時候設置任務工作量這一項的評分不能大於任務質量及任務時限的權重之和除以二 上代碼 JS邏輯代碼 因出現彈出層提示後設置輸入框的值如果大於sum的值,設置輸入的值
js onclick事件傳參
start var str class clas -c onclick spa edi 傳字符串參數 var html = "<a href=‘#‘ onclick=‘onedit(""+ row.name + "")‘;>
quartz定時任務_job實現類中獲取傳參02
hide sage 打印 exception blog div eve key tex 1.main方法: public static void main(String[] args) throws SchedulerException { // TODO Auto-ge
Mybatis中#{}和${}傳參的區別
生成 語句 區別 能夠 ole {} sel sele lec 使用#{}傳入參數時,sql語句解析是會加上‘‘。#方式能夠很大程度防止sql註入。 ${}將傳入的數據直接顯示生成在sql中。 例如:select * from user_role where user_co
vue自定義事件傳參
arguments AS eve val div event AR 自定義事件 pick vue 自定義事件,@confirm="fn()" 在emit的參數基礎上添加參數時,如何接受? 1: 第一個參數使用 $event 命名 2: 第一個參數使用 arguments。
react router路由傳參
都是 HA mat this one lin 刷新 sta ram 今天,我們要討論的是react router中Link傳值的三種表現形式。分別為通過通配符傳參、query傳參和state傳參。 ps:進入正題前,先說明一下,以下的所有內容都是在react-router
react中事件冒泡之填坑
app 簡單 冒泡 wrapper change checked 執行 class 讓我 今天在寫個組件,大致代碼是這樣的: class Switch extends React.Component { handlerChange = (e) => {
c# 自定義事件傳參(控制元件資料同步更新)
下面是傳值的視窗程式碼 public partial class Form1 : Form {//自定義一個事件 public event EventHandler SetMsg; public Form1() {
React todolist例子(傳參傳方法)
分三個元件 父元件(index.jsx)和兩個子元件(addlist.jsx,todolist.jsx) 父元件傳子元件的方法有兩個 第一種:props方式 傳值 如:<child fffss={this.state.data} /> data是父類constru
fastadmin中ajax傳參
在fastadmin專案中用到get傳參,怎麼也接收不上,細看才發現中間加了一層ajax,需要透過ajax來使用 程式碼如下: php程式碼 public function index() { $memid_arr = []; //獲取商家id
vue中路由傳參
路由: vue路由傳參方式有: query、params+動態路由傳參 1. query通過path切換路由, params通過name切換路由 // query通過path切換路由 <router-link :to="{path: 'Detail', query: { id: 1 }}"&g
js 獲取純web位址列中URL傳參
function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=
React成長路之踩坑路:react-router4路由傳參(@react-router4.3.1)
在[email protected]中傳參有三種方式 一、通過params傳參: 1、在路由表中: <Route path="/search/:type/:keyword?" component={Search} /> 2、Link處使用: <Li
原生JS及jQuery中事件委託的寫法
在繫結節點事件處理程式時遇到的問題: 每個 函式都是物件,都會佔用記憶體;記憶體中的物件越多,效能就越差。 其次,必須事先指定所有事件處理程 序而導致的 DOM訪問次數,會延遲整個頁面的互動就緒時間。 採用事件委託的優點: document 物件很
springmvc 中的Ajax中各種傳參方式(希望可以幫到大家)
傳遞普通字串 前臺: function shuzuTest2(){ $.ajax({ type:"POST", url:"<%=basePath %>saveUser2", dataTyp
在IE瀏覽器中url傳參長度問題
傳遞 http span 考過 接收參數 系統 san sin 問題: 1.在這之前我一直以為,應該說是並沒有去思考過,url地址傳參的長度限制問題:知道在項目材料價格系統中遇到之後,才對這個問題進行了具體的探索。IE中最大的長度限制為2084個,用於get傳遞數據的長度是