如何改变条件状态 - React

Question

我需要更改我的 React 应用程序中同级组件的状态。我使用 state 和 setstate

我需要更改同级组件的状态。加载页面时必须存在（页面可见）<BkUser />点击"button id ="ds-visual时必须删除（<BkUser />不能存在）必须存在<BkDescanso />。当您单击 <BkSleep />（在 div 父级中）时，您应该删除 <BkDescanso /> 并显示 <BkUser />

这是网络。绝不能同时存在 <BkUser/> 和 <BkSleep>。 <Bkuser />是蓝色方块，<BkDescanso />是红色方块

这是我的代码：

编辑：我编辑了我的原始代码，因为我解决了这个问题。这是最终的 OK 代码。最后最重要的是状态条件

{
this.state.usuario ? (<BkUser handleClick = {this.handleClick} usuario={this.state.usuario}/>): (<BkDescanso handleClick = {this.handleClick} usuario={this.state.usuario}/>)}

import React, { Component } from 'react';

class Header extends Component {
    constructor(props) {
        super(props);

        this.state = {
            usuario: true,
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(state => ({
          usuario: !state.usuario
        }));
        //alert("Works button");
      }

    render(){
        return (
            <header className="header">
                <div className="configuracion">
                {
          this.state.usuario
            ? (
                <BkUser handleClick = {this.handleClick} usuario={this.state.usuario}/>
            )
            : (
                <BkDescanso handleClick = {this.handleClick} usuario={this.state.usuario}/>
                )}
                    <div className="content-btn">
                        <button id="config" className='btn btn--rounded'><span className="ico-configuracion"></span></button>
                        <button id="salir" className='btn btn--rounded'><span className="ico-exit"></span></button>
                    </div>
                </div>
            </header>
        );
    }
}

class BkUser extends Component{

    render(){
            return ((    
                <div className='usuario'>
                    <img src="../img//usuario.svg" alt="Imagen usuario"/>
                    <div className="content-usuario">
                        <span id="nm-usuario" className="h4">Hermione Jane Granger</span>
                        <span id="tp-usuario" className="h5">Supervisor</span>
                    </div>
                    <div className="content-descansos">
                        <div className="botones">
                            <button id="ds-visual" className='btn btn--rounded' onClick={this.props.handleClick}><span className="ico-visual"></span></button>
                            <button id="ds-admin" className='btn btn--rounded'><span className="ico-tiempo-administrativo"></span></button>
                            <button id="ds-otros" className='btn btn--rounded'><span className="ico-descanso"></span></button>
                        </div>
                        <div className="ds-actual">
                            <span id="ds-tipo">Administrativo</span>
                            <span id="ds-tiempo">00:08:47</span>
                        </div>
                    </div>
                </div>
            ));
    }
}

class BkDescanso extends Component {

    render(){
        return ((   
            <div className='usuario descanso' onClick={this.props.handleClick}>
                <h3>Finalizar descanso</h3>
            </div>
        ));
    }
}


export default Header;

现在 handleClick 有效，但始终存在 BkUser 和 BkDescanso。我只需要一个存在。如果您单击 id = "ds-visual"，bkUser 块应该会消失，而 BkDescanso 会出现。然后，如果您在 BkUser 中单击 div className = 'user rest'，则应该只有 BkDescanso。

我认为显示或隐藏无法知道什么时候是真的什么时候是假的

非常感谢您的帮助。

Answer 1

您可以通过将 parent 中的函数通过 props 传递给它们来更改兄弟姐妹的状态。

最后你的兄弟姐妹是他们 parent 的 children。

您可以阅读这篇关于如何更改 child 组件状态的文章。

https://medium.freecodecamp.org/react-changing-state-of-child-component-from-parent-8ab547436271

您可以研究的另一件事是 React Redux。

Answer 2

您遗漏了两件事：

首先你必须将handleClick函数传递给BkUser组件，然后你必须通过this.props.handleClick.

调用它

...
<BkUser handleClick={this.handleClick} usuario={this.state.usuario} />
....
<button
    id="ds-visual"
    className="btn btn--rounded"
    onClick={this.props.handleClick}
    >
    ds-visual
    <span className="ico-visual" />
</button>

CodeSandbox here.

.

如何改变条件状态 - React

How to change the state in conditional - React

conditional

components

siblings

setstate

reactjs