Question

我有一个显示几个图表的组件，我想为每个显示或隐藏图表的按钮创建一个按钮。我已经找到了如何隐藏和显示但它对我有用，因为它隐藏或显示所有图表，任何帮助都会受到欢迎。

顺便说一句，我是全新的反应，所以如果我不能表达自己，我会道歉。

到目前为止我的代码：

＆＃13;

export default class Home extends Component {
    constructor(props, context) {
        super(props, context);

        this.handleShow = this.handleShow.bind(this);
        this.handleHide = this.handleHide.bind(this);

        this.state = {
            show: false,
            isHidden: true,

        };
    }




    toggle() {
        this.setState({
            isHidden: !this.state.isHidden,
        });
    }




    render() {

        let shown = {
            display: this.state.isHidden  ? "inline-block" : "none"
        };

        let hidden = {
            display: this.state.isHidden ? "none" : "inline-block"
        };

        return (
            <div className="Home">

                <div className="row">
                    <div className="col-md-12">
                        <div className="card">
                            <div className="card-header">
                                <h4 className="card-title">Gráficos</h4>

                                <div className="viewOptions">

                                    <button className="btn bg-info"
                                    ID="prueba">ODC'S
                                    onClick={this.toggle.bind(this)}
                                        <FontAwesome name="eye"/>
                                    </button>
                                    <button 
                                    onClick={this.toggle.bind(this)}
                                    className="btn bg-info">ODI'S  <FontAwesome name="eye"/></button>
                                    <button className="btn bg-info">EGRESOS  <FontAwesome name="eye"/></button>
                                    <button className="btn bg-info">INGRESOS  <FontAwesome name="eye"/></button>
                                    <button className="btn bg-info">ESPACIOS RENTADOS  <FontAwesome name="eye"/></button>
                                </div>
                            </div>



                            {/*ODC'S COLOCADAS*/}

                            <Echart 1
                            style={show} >
                            
                            <Echart 2
                            style ={show}>
                            
                            <Echart ...>

＆＃13;

谢谢。

Answer 1

JanneP关于评论的逻辑是正确的，但是如果你想保持容器上的逻辑，那么你需要为每个项目提供某种键或索引。

所以按钮看起来像这样：

<button onClick={ () => {
        // keep the state
        let shown = [ ...this.state.shown ];
        // revert the stored boolean to toggle
        shown.chart1 = !shown.chart1
        this.setState({ shown });
    }
} />

图表可能是：

// If not familiar with the ternary: that is just shorthand if statement
<Chart style={ this.state.shown.chart1 ? { display: 'inline-block' } : { display: 'none' } } />

如何隐藏/显示特定组件的反应

1 个答案: