javascript - 在reactjs中使用按钮创建显示和隐藏部分

Question

我有三个按钮，当点击显示和单个div时，这是在reactjs中完成的

import React, { Component } from 'react';

export class ModeExtended extends Component {

constructor() {
    super();

    this.busButton = this.busButton.bind(this);
    this.trainButton = this.trainButton.bind(this);
    this.tramButton = this.tramButton.bind(this);

    this.state = {
        isHidden: false,
    }
}


busButton(){
    console.log('Bus Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHidden: !prevState.isHidden
        };
    });
}

trainButton(){
    console.log('Train Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHidden: !prevState.isHidden
        };
    });
}

    tramButton(){
    console.log('Tram Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHidden: !prevState.isHidden
        };
    });
}


render() {
    return (
        <div>   
            <h5>Mode Extended</h5>

            <button onClick={this.busButton}>Bus</button>
            <button onClick={this.trainButton}>Train</button>
            <button onClick={this.tramButton}>Tram</button>





            {this.state.isHidden && (
                <div>
                    <h6>You can show Bus Data Now....</h6>
                </div>
            )}

            {this.state.isHidden && (
                <div>
                    <h6>You can show Train Data Now....</h6>
                </div>
            )}

            {this.state.isHidden && (
                <div>
                    <h6>You can show Tram Data Now....</h6>
                </div>
            )}


        </div>
    )
}
}

export default ModeExtended

当我单击任何按钮时，它会显示所有公共(public)汽车、有轨电车和火车数据 - 我如何让它们一次只显示一件事并确保其他州关闭。我真的在这里遗漏了一些东西，需要一个或两个或三个指针......

如何添加一个 ID 以使每个按钮彼此分开打开，当单击一个按钮时如何关闭其余的 div - 或打开状态，我在这里迷失了方向。请帮帮我。

一如既往地干杯!

这是一个REPL我的代码:

Answer 1

您需要有 3 个不同的 isHidden 属性来控制您的 div。你可以这样做:

this.state = {
    isHiddenBus: false,
    isHiddenTrain: false,
    isHiddenTram: false,
    }

然后在你的渲染中像这样:

{this.state.isHiddenBus && (
                <div>
                    <h6>You can show Bus Data Now....</h6>
                </div>
            )}

            {this.state.isHiddenTrain && (
                <div>
                    <h6>You can show Train Data Now....</h6>
                </div>
            )}

            {this.state.isHiddenTram && (
                <div>
                    <h6>You can show Tram Data Now....</h6>
                </div>
            )}

您的按钮也必须相应地更改为状态。

busButton(){
    console.log('Bus Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHiddenBus: !prevState.isHiddenBus
            isHiddenTram: false
            isHiddenTrain: false
        };
    });
}

trainButton(){
    console.log('Train Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHiddenTrain: !prevState.isHiddenTrain
            isHiddenBus: false
            isHiddenTram: false

        };
    });
}

    tramButton(){
    console.log('Tram Button Was Pressed');
    this.setState((prevState) => {
        return{
            isHiddenTram: !prevState.isHiddenTram
            isHiddenTrain: false
            isHiddenBus: false
        };
    });
}