我需要在我的React App中更改兄弟组件的状态。我使用state和setstate
我需要改变兄弟组件的状态。加载页面时,必须存在(在页面中可见)<BkUser />
,当点击“button id =”ds-visual“必须删除它(<BkUser />
必须不存在)并且必须存在<BkDescanso />
。当你点击<BkSleep />
(在div父母)你应该删除<BkDescanso />
并显示<BkUser />
这是我的代码:
编辑:我编辑原始代码,因为我解决了问题。这是最终的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。
我认为它无法知道什么时候是真的,何时显示或隐藏是假的
非常感谢您的帮助。
你错过了两件事:
首先,你必须将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>
您可以通过将一个函数从父项通过props传递给它们来更改兄弟姐妹的状态。
最后,你的兄弟姐妹是他们父母的孩子。
您可以阅读有关如何更改子组件状态的文章。
React js change child component's state from parent component
https://medium.freecodecamp.org/react-changing-state-of-child-component-from-parent-8ab547436271
您可以研究的另一件事是React Redux。