基于按钮状态的显示/隐藏
我试图创建一个手风琴风格的按钮,并设置我的组件与按钮功能来隐藏我的列表点击,但我列表不会再出现,并且还想添加隐藏/显示列表之间的动画过渡。我应该在handleClick()
函数中使用prevState
吗?有处理动画的首选方法吗?何反应? CSS?基于按钮状态的显示/隐藏
//Render Links
const ReportLinks = props => {
return (
<ul>
{
props.links.map((link, index) => {
return (<li key={index}><a href={link.reportLink}>{link.reportLink}</a></li>)
})
}
</ul>
)
}
class Footer extends React.Component {
constructor(props){
super(props);
this.state = { linksHidden: true };
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState({ linksHidden: false });
}
render() {
return (
<div className="annotation-card__footer">
<button onClick={this.handleClick}>Report Links ({this.props.report.length})</button>
{ this.state.linksHidden ? <ReportLinks links={this.props.report}/> : null }
</div>
);
}
}
我想我找到了你的问题。在handleClick方法中,将状态更改为false以隐藏列表。当再次按下按钮显示列表时,他们所做的就是将状态再次设置为假。像这样翻转状态:
handleClick() {
this.setState({ linksHidden: !this.state.linksHidden });
}
编辑:菲利克斯·克林是正确的。上面的代码对于简单的应用程序来说是可以的,但是当你的应用程序变得更加复杂并且setState可以在很短的时间内被调用很多次时,最好使用Felix Kling所说的函数。
handleClick() {
this.setState(state => ({ ...state, linksHidden: !state.linksHidden }));
}
至于动画,你可以使用CSS转换。状态改变时只需添加或删除一个类。如果您想要更多控制,请尝试使用react-motion。我没有任何经验,但使用起来并不难。
工作。谢谢! – cphill
更好的做法是将函数传递给'setState',以确保您始终使用最新状态:'this.setState(state => this.setState({linksHidden:!state.linksHidden}));'。 –
我更新了我的答案以解决您的问题。 –