index.js?

import React from 'react'; import ReactDOM from 'react-dom';import './App.css'class Tab extends React.Component {constructor(props) {super(props)//狀態(tài) 時間this.state = {c2: "content",c1: "content active"}this.clickEvent = this.clickEvent.bind(this)}clickEvent(e) {console.log('clickEvent')console.log(e)console.log(e.targrt.dataset.index)let index = e.targrt.dataset.indexif (index == '1') {this.setState({c1: "content active",c2: "content"})} else {this.setState({c1: "content ",c2: "content active"})}}render() {return ( <div ><button data - index = "1"onClick = { this.clickEvent } > 內容1 < /button> <button data - index = "2"onClick = { this.clickEvent } > 內容2 < /button> <div className = { this.state.c1 } ><h1 > 內容1 < /h1> < /div > <div className = { this.state.c2 } ><h1 > 內容2 < /h1> < /div > </div >)}/* 生命周期函數 */}//console.log("這是渲染函數") ReactDOM.render( < Tab / > , document.querySelector("#root"))

App.css

.content {display: none }.content .active {display: block }

?

總結

以上是生活随笔為你收集整理的前端学习（2228）：react之状态三的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。