javascript - 如果按下按钮， react 和 JSX : exchange two divs,

Question

我是 React 和 JSX 的新手，我想交换两个 div。我用 Bootstrap 4、JSX 和 React (Typescript) 完成了它。 我有多个带有 cols 的行，并希望它们按 1:1 的比例更改。

`

<row> --- <row>

<col> --- <col>

<col> --- <col>

</row> --- </row>

` ...

How can I do this only with JSX on the css side.
The button use the  this.sidechange on onClick.

                <div className="row">
                    <div className="col">

                    </div>
                    <div className="col">
                        <button type="button" className="btn btn-warning" onClick={this.sideChange}>change the two divs</button>
                    </div>
                    <div className="col">

                    </div>
                </div>


                <div className="row">
                    <div className="col">
                        <h1>test</h1>
                    </div>

                    <div className="col"><h1>test 2</h1>
                    </div>
                </div>

... and more rows and cols.

Code for the button:




sideChange(event:any) {        
        if (stat === 0) {  //
            stat = 1;      //reverse
//code for changing

}
else{
stat = 0;
//code for changing

提前致谢。

Answer 1

class App extends React.Component {
  state = { status: false };

  handleToggle = () => {
    this.setState(prev => ({ status: !prev.status }));
  };
  render() {
    const { status } = this.state;
    return (
      <div>
        <button onClick={this.handleToggle}>Toggle</button>
        <div className="row">
          {status ? (
            <div className="col">
              <h1>test 1</h1>
            </div>
          ) : (
            <div className="col">
              <h1>test 2</h1>
            </div>
          )}
        </div>
      </div>
    );
  }
}