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

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

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

一如既往的欢呼！

这是我的代码的REPL ：

标签： javascriptreactjs

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