2

下面的代码在单击各种选项卡时隐藏并显示div，并且按照下面的代码与 javascript 一起工作正常

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>

<style>
#t2, #t3 {
 display: none; 
}

#t1{
 display: block; 
}
</style>


<script>

function tablet(indices) {

  document.getElementById('t1').style.display="none";
  document.getElementById('t2').style.display="none";
   document.getElementById('t3').style.display="none";

  document.getElementById(indices).style.display="block";

}

</script>
<a onclick="tablet('t1')">Tab 1</a><br>
<a  onclick="tablet('t2')">Tab 2</a><br>
<a  onclick="tablet('t3')">Tab 3</a><br>

<div id="t1"><b>I am tab 1</b></div>

<div id="t2"><b>I am tab 2</b></div>

<div id="t3"><b>I am tab 3</b></div>
</body></html>

这是我的问题： 现在我想在 reactjs 中实现它，但是div单击任何选项卡时都无法按预期工作。它显示和隐藏所有内容。

它应该像上面的javascript一样工作。例如。的内容tab1会自动显示。当我单击 时tab2，tab1应该隐藏的内容，以便tab2显示的内容等等。

任何解决方案或解决方法将不胜感激

<!DOCTYPE html>
<html>
   <head>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


   </head>
   <body>




<div id="app"></div>

<script type="text/babel">

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showing: true };
  }

  render() {

const { showing } = this.state;
    return (
      <div className="container">
<b>Hello welcome</b><br />

 <button onClick={() => this.setState({ showing: !showing })}>Tab 1</button>
<button onClick={() => this.setState({ showing: !showing })}>Tab 2</button>
<button onClick={() => this.setState({ showing: !showing })}>Tab 3</button>

                <div style={{ display: (showing ? 'block' : 'none') }}>I am Tab 1</div>
                <div style={{ display: (showing ? 'block' : 'none') }}>I am Tab 2</div>
                 <div style={{ display: (showing ? 'block' : 'none') }}>I am Tab 3</div>


      </div>
    );
  }
}



ReactDOM.render(<Application />, document.getElementById('app'));


</script>


   </body>
</html>
4

2 回答 2

0

看看这里:)

    this.state = {activeTab: 'tab1' };

    <button onClick={() => this.setState({ activeTab: 'tab1' })}>Tab 1</button>
    <button onClick={() => this.setState({ activeTab: 'tab2' })}>Tab 2</button>
    <button onClick={() => this.setState({ activeTab: 'tab3' })}>Tab 3</button>

     <div style={{ display: (activeTab==="tab1" ? 'block' : 'none') }}>I am Tab 1</div>
     <div style={{ display: (activeTab==="tab2" ? 'block' : 'none') }}>I am Tab 2</div>
     <div style={{ display: (activeTab==="tab3" ? 'block' : 'none') }}>I am Tab 3</div>

更多问题在这里评论

于 2019-11-29T19:39:46.483 回答
0

如果我是你，我会使用遍历按钮列表的 map 函数：

const buttons = [button1, button2, button3];

const [isOpen, setIsOpen] = useState(false);

const toggle = (index) => {
  console.log(index)
  setIsOpen(!isOpen);
}

buttons.map((btn, index)=> {
    return (
      <div>
        <button onClick={toggle(index)}>Button</button>
        <div className={isOpen ? 'none' : 'block'}>Toggling</div>
      </div>
    )
})

于 2019-11-29T21:30:36.007 回答