如何在有条件的情况下改变状态 - React

Posted 2023-02-23

技术标签:

【中文标题】如何在有条件的情况下改变状态 - React【英文标题】：How to change the state in conditional - React 【发布时间】：2019-09-02 20:58:57 【问题描述】：

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

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

This is the web. There should never be <BkUser/> and <BkSleep> at the same time. <Bkuser /> is the blue block and <BkDescanso /> is the red block

这是我的代码：

编辑：我编辑我的原始代码是因为我解决了问题。这是最终的 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" />
                    <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。

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

非常感谢您的帮助。

【问题讨论】：

最好将孩子的状态数据处理到父组件中。因此，每当您单击子项中的按钮时，只需在父项中使用 this.props.functionName 调用一个函数并更新父项中的状态，这将导致整个组件的重新渲染。 【参考方案1】：

你错过了两件事：

首先您必须将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.