使用 reactjs 使用拖车按钮在两个 div 之间移动

Question

enter image description hereenter image description here我在react js项目中需要一些帮助：我在 React 组件中有两个 div，我想使用两个按钮在它们之间切换。当您按下第一个按钮时，第一个 div 出现，第二个消失，反之亦然。可以的话请举个简单的例子说明一下，谢谢

Answer 1

它一定很简单，您可以通过一个控制按钮的状态变量来获得它。

const [option, setOption] = useState('1');

此状态变量 option 将保存 1 或 2，如果选择 1 则它将显示第一个内容部分，否则将显示第二个内容部分显示。

这些选项上的 onClick 将更改 state 变量。

onClick={(e) => setOption('1')}

这是一个代码。 Code on sandbox

import React, {useState} from 'react';

import "./styles.css";

export default function App() {
  const [option, setOption] = useState('1');
  return (
    <div className="App">
      <div className="option-wrap">
        <div className={`option ${option === '1'? 'selected' : ''}`} onClick={(e) => setOption('1')}>Option 1</div>
        <div className={`option ${option === '2'? 'selected' : ''}`} onClick={(e) => setOption('2')}>Option 2</div>
      </div>
      <div className="content-wrap">
        {option === '1' && <div>Option 1 content</div>}
        {option === '2' && <div>Option 2 content</div>}
      </div>
    </div>
  );
}

简单CSS


.option-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-wrap .option {
  background: white;
  padding: 8px 12px;
  margin: 10px 12px 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
}

.option-wrap .option.selected {
  background: red;
  color: white;
}

使用 reactjs 使用拖车按钮在两个 div 之间移动

move between two div with tow button using reactjs

html

onclick

button

reactjs