Question

我试图创建一个手风琴样式按钮，并设置我的组件与按钮功能隐藏我的列表点击，但我列表不再出现，并且还想添加隐藏/之间的动画过渡显示列表。我应该在prevState函数中使用handleClick()吗？有没有一种处理动画的首选方法？何反应？ 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。我对它没有任何经验，但使用它看起来并不太难。

基于按钮状态显示/隐藏

1 个答案: