import React from 'react';
import LeftRectangle from './images/LeftRectangle.png';
import RightRectangle from './images/RightRectangle.png';
class Basic extends React.Component {
constructor() {
super();
this.state = {
changeValue: '', // 任務(wù)欄改變值
isLocked: false,
value: 2
}
this.changeHandle = this.changeHandle.bind(this);
this.setValue = this.setValue.bind(this);
}
setValue() {
if (this.state.isLocked) {
return
}
this.setState({
value: this.state.value + 1,
isLocked: true
})
}
changeHandle(content, event){
console.log('傳遞的內(nèi)容 = ' + content)
this.setState({
isLocked: !this.state.isLocked
})
}
componentWillMount() {
console.log('組件將要渲染')
this.setState({
value: this.state.value + 1
})
}
componentDidMount(){
console.log('組件正式渲染')
}
render() {
console.log('渲染render()')
var divStyle = {
}
var valueStyle = {
fontSize: 50,
color: '#FF0004'
}
var changeStyle01 = {
width: 100,
height: 100,
position: 'absolute',
backgroundColor: '#5B93EF',
left: 50,
top:200
}
var changeStyle02 = {
width: 100,
height: 100,
position: 'absolute',
backgroundColor: '#0B78E3',
left: 200,
top:200
}
var LeftStyle = {
position: 'absolute',
top: 30,
left:0,
height: 24,
width: 4
}
var ContentStyle = {
position: 'absolute',
top: 30,
height: 30,
width: 44,
left:30
}
var RightStyle = {
position: 'absolute',
top: 30,
height: 24,
width: 4,
left:80
}
return (
<div id style={divStyle} className='data-line'>
<div style={changeStyle01}>
<div style={LeftStyle}><img src={LeftRectangle} alt="" /></div>
<div style={ContentStyle}>改變一</div>
<div style={RightStyle}><img src={RightRectangle} alt="" /></div>
</div>
<div style={changeStyle02}>
在改變
</div>
</div>
)
}
}
export default Basic;
import React from 'react';
import LeftRectangle from './images/LeftRectangle.png';
import RightRectangle from './images/RightRectangle.png';
class Basic extends React.Component {
constructor() {
super();
this.state = {
changeValue: '', // 任務(wù)欄改變值
isLocked: false,
value: 2,
classClick: {},
classNotClick: {},
changeStyleFlag: false
}
this.changeHandle = this.changeHandle.bind(this);
this.setValue = this.setValue.bind(this);
this.handleDivClick = this.handleDivClick.bind(this);
}
handleDivClick (){
this.setState({changeStyleFlag: !this.state.changeStyleFlag})
}
setValue() {
if (this.state.isLocked) {
return
}
this.setState({
value: this.state.value + 1,
isLocked: true
})
}
changeHandle(content, event){
console.log('傳遞的內(nèi)容 = ' + content)
this.setState({
isLocked: !this.state.isLocked
})
}
componentWillMount() {
console.log('組件將要渲染')
this.setState({
value: this.state.value + 1
})
}
componentDidMount(){
console.log('組件正式渲染')
}
render() {
console.log('渲染render()')
var divStyle = {
}
var valueStyle = {
fontSize: 50,
color: '#FF0004'
}
var changeStyle01 = {
width: 100,
height: 100,
position: 'absolute',
backgroundColor: '#5B93EF',
left: 50,
top:200
}
var changeStyle02 = {
width: 100,
height: 100,
position: 'absolute',
backgroundColor: '#0B78E3',
left: 200,
top:200
}
var LeftStyle = {
position: 'absolute',
top: 30,
left:0,
height: 24,
width: 4
}
var ContentStyle = {
position: 'absolute',
top: 30,
height: 30,
width: 44,
left:30
}
var RightStyle = {
position: 'absolute',
top: 30,
height: 24,
width: 4,
left:80
}
return (
<div id style={divStyle} className='data-line'>
<div style={changeStyle01} onClick={this.handleDivClick}>
{this.state.changeStyleFlag ?
<div style={LeftStyle}><img src={LeftRectangle} alt="" /></div>
<div style={ContentStyle}>改變一</div>
<div style={RightStyle}><img src={RightRectangle} alt="" /></div>:
<div style={ContentStyle}>改變一</div>
}
</div>
<div style={changeStyle02} onClick={this.handleDivClick}>
{this.state.changeStyleFlag ?
<div style={ContentStyle}>在改變</div> :
<div style={LeftStyle}><img src={LeftRectangle} alt=""/></div>
<div style={ContentStyle}>改變一</div>
<div style={RightStyle}><img src={RightRectangle} alt="" /></div>
}
</div>
</div>
)
}
}
export default Basic;
看不懂你的需求，要理解react的思想就是state映射到view，你如果要交換兩個div的style，其實就是交換state，把state和style關(guān)聯(lián)起來就可以了
import React from 'react';
class Test extends React.Component{
constructor() {
super(...arguments);
this.state = {_class: 'one'};
}
render() {
const {_class} = this.state;
return(
<div>
<div className={_class} onClick={() => this.setState({_class: 'one'})}></div>
<div className={_class} onClick={() => this.setState({_class: 'two'})}></div>
</div>
);
}
}大概這樣。自己組織一下。
import React from 'react';
import './styles/changeDivStyle02.css';
import LeftRectangle from './images/LeftRectangle.png';
import RightRectangle from './images/RightRectangle.png';
class Basic extends React.Component {
constructor() {
super();
this.state = {
changeValue: '', // 任務(wù)欄改變值
isLocked: false,
value: 2,
classClick: {},
classNotClick: {},
changeStyleFlag: false
}
this.handleDivClick = this.handleDivClick.bind(this);
this.handleDivClick02 = this.handleDivClick02.bind(this);
}
handleDivClick (){
if(this.state.changeStyleFlag == false)
this.setState({changeStyleFlag: !this.state.changeStyleFlag})
}
handleDivClick02 (){
if(this.state.changeStyleFlag == true)
this.setState({changeStyleFlag: !this.state.changeStyleFlag})
}
componentWillMount() {
console.log('組件將要渲染')
this.setState({
value: this.state.value + 1
})
}
componentDidMount(){
console.log('組件正式渲染')
}
render() {
console.log('渲染render()')
return (
<div className='data-line'>
<div className={this.state.changeStyleFlag ? 'div1true' : 'div1false'}
onClick={this.handleDivClick}>
<div>改變一</div>
</div>
<div className={this.state.changeStyleFlag ? 'div2true' : 'div2false'}
onClick={this.handleDivClick02}>
<div>改變二</div>
</div>
</div>
)
}
}
export default Basic;
changeDivStyle02.css
.div1true {
width: 100px;
height: 100px;
position: absolute;
background-color: #13CDF4;
left: 50px;
top: 200px;
}
.div2true {
width: 100px;
height: 100px;
position: absolute;
background-color: #FF0004;
left: 200px;
top: 200px;
}
.div1false {
width: 100px;
height: 100px;
position: absolute;
background-color: #FF0004;
left: 50px;
top: 200px;
}
.div2false {
width: 100px;
height: 100px;
position: absolute;
background-color: #13CDF4;
left: 200px;
top: 200px;
}
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
北大課工場是北京大學(xué)校辦產(chǎn)業(yè)為響應(yīng)國家深化產(chǎn)教融合／校企合作的政策，積極推進(jìn)“中國制造2025”，實現(xiàn)中華民族偉大復(fù)興的升級產(chǎn)業(yè)鏈。利用北京大學(xué)優(yōu)質(zhì)教育資源及背
博為峰，中國職業(yè)人才培訓(xùn)領(lǐng)域的先行者
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多