根据按钮状态显示/隐藏

Question

我正在尝试创建一个手风琴风格的按钮，并设置我的组件具有按钮功能以在单击时隐藏我的列表，但我的列表没有重新出现，并且还想在隐藏/显示之间添加动画过渡列表。我应该在我的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>
        );
    }
}

Answer 1

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

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

编辑：Felix Kling 是正确的。上面的代码适用于简单的应用程序，但是当您的应用程序变得更复杂并且可以在短时间内多次调用 setState 时，最好使用 Felix Kling 所说的函数。

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

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