溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了React組件內事件傳參實現tab切換的示例代碼，分享給大家，具體如下：
下面是一個向組件內函數傳遞參數的小例子
需求: 在頁面的底部, 有四個按鈕, 負責切換內容, 當按鈕被點擊時, 變為激活狀態, 其余按鈕恢復到未激活狀態
分析: 我們首先要創建點擊事件的處理函數, 當按鈕被點擊時, 將按鈕的id作為參數發送給處理函數, 處理函數激活對應當前id的按鈕, 并將其余三個按鈕調整到未激活狀態
實現: 用組件state創建一個含有四個元素的一維數組, 四個元素默認為零, 但界面中某個按鈕被點擊時, 組件內處理函數將一維數組內對應元素變為1, 其它元素變為0
效果演示:
核心代碼:
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss'
class TabButton extends React.Component {
constructor(props) {
super(props);
this.state = {
markArray: [0, 0, 0, 0],
itemClassName:'tab-button-item'
};
this.activateButton = this.activateButton.bind(this);
}
// 根據參數id, 來確定激活四個item中的哪一個
activateButton(id) {
let tmpMarkArray = [0, 0, 0, 0]
tmpMarkArray[id] = 1;
this.setState({markArray: tmpMarkArray});
}
render() {
return (
<div className = "tab-button" >
<div className = {(this.state.markArray)[0] ? "tab-button-item-active" : "tab-button-item" } onClick = { this.activateButton.bind(this, 0) } > 零 </div>
<div className = {(this.state.markArray)[1] ? "tab-button-item-active" : "tab-button-item" } onClick = { this.activateButton.bind(this, 1) } > 壹 </div>
<div className = {(this.state.markArray)[2] ? "tab-button-item-active" : "tab-button-item" } onClick = { this.activateButton.bind(this, 2) } > 貳 </div>
<div className = {(this.state.markArray)[3] ? "tab-button-item-active" : "tab-button-item" } onClick = { this.activateButton.bind(this, 3) } > 叁 </div>
</div>)
}
}
ReactDOM.render( < TabButton / > , document.getElementById("root"));
小結
上面的例子也可以通過event.target.value快速實現,但這個demo的擴展性更好, 在版本迭代過程中, 我們可以傳遞數量更多的參數, 詳盡的描述UI層當前的狀態, 方便業務的擴展
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
