基于按钮状态的显示/隐藏

我试图创建一个手风琴风格的按钮，并设置我的组件与按钮功能来隐藏我的列表点击，但我列表不会再出现，并且还想添加隐藏/显示列表之间的动画过渡。我应该在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> 
     ); 
    } 
}

来源

2017-10-18 cphill

我更新了我的答案以解决您的问题。 –

我想我找到了你的问题。在handleClick方法中，将状态更改为false以隐藏列表。当再次按下按钮显示列表时，他们所做的就是将状态再次设置为假。像这样翻转状态：

handleClick() { 
    this.setState({ linksHidden: !this.state.linksHidden }); 
}

编辑：菲利克斯·克林是正确的。上面的代码对于简单的应用程序来说是可以的，但是当你的应用程序变得更加复杂并且setState可以在很短的时间内被调用很多次时，最好使用Felix Kling所说的函数。

handleClick() { 
    this.setState(state => ({ ...state, linksHidden: !state.linksHidden })); 
}

至于动画，你可以使用CSS转换。状态改变时只需添加或删除一个类。如果您想要更多控制，请尝试使用react-motion。我没有任何经验，但使用起来并不难。

来源

2017-10-18 00:32:45

工作。谢谢！ – cphill

更好的做法是将函数传递给'setState'，以确保您始终使用最新状态：'this.setState（state => this.setState（{linksHidden：！state.linksHidden}））;'。 –

基于按钮状态的显示/隐藏

回答

相关问题