Как поменять состояние на условное - Реакция - PullRequest
Новая
       51

Как поменять состояние на условное - Реакция

1 голос
/ 12 апреля 2019

Мне нужно изменить состояние компонентов одного уровня в моем приложении React. Я использую состояние и settate

Мне нужно изменить состояние компонентов одного уровня. При загрузке страницы она должна существовать (отображается на странице) <BkUser />, а при нажатии кнопки "id id =" ds-visual "она должна быть удалена (<BkUser /> не должна существовать) и должна существовать <BkDescanso />. Когда вы нажимаете <BkSleep /> (в родительском элементе div), вы должны удалить <BkDescanso /> и показать <BkUser />

Это сеть. Никогда не должно быть <BkUser/> и <BkSleep> одновременно. <Bkuser /> - синий блок, <BkDescanso /> - красный блок

Это мой код:

Редактировать : Я редактирую свой исходный код, потому что я исправляю проблему. Это последний ОК код. В итоге самое главное было условное государство 

{
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. Затем, если вы нажмете на div className = 'user rest' в BkUser, то должен быть только BkDescanso.

Я думаю, что он не может знать, когда это правда, а когда ложно, чтобы показать или скрыть

Большое спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Вам не хватает двух вещей:

Сначала необходимо передать функцию 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 здесь .

Подробнее здесь .

0 голосов
/ 12 апреля 2019

Вы можете изменить состояние братьев и сестер, передав функцию от родителя через реквизиты в них.

В конце ваши братья и сестры являются детьми их родителей.

Вы можете прочитатьэта статья о том, как изменить состояние дочерних компонентов.

Реагирует на изменение состояния дочернего компонента по сравнению с родительским компонентом

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

Другойто, на что вы могли бы обратить внимание, это React Redux.

...