每次点击一个div，样式互相交换一次，请问怎么解决？

Question

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: '', // 任务栏改变值
            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('传递的内容 = ' + 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: '', // 任务栏改变值
            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('传递的内容 = ' + 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;

Answer 1

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>
    );
  }
}

大概这样。自己组织一下。

Answer 2

看不懂你的需求，要理解react的思想就是state映射到view，你如果要交换两个div的style，其实就是交换state，把state和style关联起来就可以了

Answer 3

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: '', // 任务栏改变值
            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;
}