使用React.js实现SlideToggle功能

本文介绍了使用React.js实现SlideToggle功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想通过下拉菜单完成以下操作。

I'd like to accomplish the following with my drop down menu.

1 - 点击后显示

1 - Show it upon click

2 - 在第二次点击时隐藏它

2 -Hide it on second click

3 - 点击它之外的任何地方时隐藏它。

3 - Hide it when clicking anywhere outside of it.

4 - 用幻灯片效果完成所有这些

4 - Do all that with a slide effect

我已经有1-3个被覆盖。我在4上被阻止。

如何创建幻灯片效果以及下面发生的点击事件？

我使用jQuery的slideToggle（未在此处显示）得到了一个可靠的概念证明......但是，我想学习如何以反应的方式做到这一点。

I've got a working proof of concept using jQuery's slideToggle (not shown here)... however, I'd like to learn how to do it in the react way.

如果您想查看完整的代码： 做出反应下拉导航栏

in case you'd like to see the full the code: react drop-down nav bar

// CASE 1 Show Hide on click, no slide effect yet class ServicesDropdown extends Component { constructor() { super(); this.state = { dropdown: false }; } handleClick = () => { if (!this.state.dropdown) { // attach/remove event handler document.addEventListener('click', this.handleOutsideClick, false); } else { document.removeEventListener('click', this.handleOutsideClick, false); } this.setState(prevState => ({ dropdown: !prevState.dropdown, })); } handleOutsideClick = (e) => { // ignore clicks on the component itself if (this.node.contains(e.target)) { return; } this.handleClick(); } render() { return ( <li ref={node => { this.node = node; }}> <a href="#!" onClick={this.handleClick}>Services +</a> {this.state.dropdown && ( <ul className="nav-dropdown" ref={node => { this.node = node; }}> <li><a href="#!">Web Design</a></li> <li><a href="#!">Web Development</a></li> <li><a href="#!">Graphic Design</a></li> </ul> )} </li> ) } }

推荐答案

前段时间我想出了如何将一个向下滑动的效果应用于React组件，它不是完全相同的行为，但你可能会发现我的代码和描述有用。请在此处查看我对其他相关问题的回答： stackoverflow/a/48743317/1216245

A while ago I figured out how to apply a slide-down effect to a React component, it's not exactly the same behavior but you might find my code & description useful. See my answer to a different, related question here: stackoverflow/a/48743317/1216245

博客文章在这里： blog.lunarlogic.io/2018/slidedown-menu-in-react / 即可。随意窃取代码的任何部分。

The blog post is here: blog.lunarlogic.io/2018/slidedown-menu-in-react/. Feel free to steal any part of the code.

以下是对最重要部分的简短描述解决方案。

对于React / JSX部分，将包装要在CSSTransitionGroup中滑动的组件。 （您可以在此处详细了解此React插件： https：/ /reactjs/docs/animation.html#high-level-api-reactcsstransitiongroup 和这里： reactcommunity/react-transition-group/ 。）

As for the React/JSX part, you wrap the component that you'd like to slide in a CSSTransitionGroup. (You can read more about this React Add-on here: reactjs/docs/animation.html#high-level-api-reactcsstransitiongroup and here: reactcommunity/react-transition-group/.)

<div className="component-container"> <CSSTransitionGroup transitionName="slide" transitionEnterTimeout={300} transitionLeaveTimeout={300} > { this.state.showComponent && <Component /> } </CSSTransitionGroup> </div>

请注意，它全部包装在一个容器中，动画像你一样工作所需我喜欢它。

Note that it's all wrapped in a container, which you'll need for the animation to work like you'd like it to.

这是我用于幻灯片动画效果的CSS：

And here is the CSS I used for the slide animation effect:

/* Slide animation styles. You may need to add vendor prefixes for transform depending on your desired browser support. */ .slide-enter { transform: translateY(-100%); transition: .3s cubic-bezier(0, 1, 0.5, 1); &.slide-enter-active { transform: translateY(0%); } } .slide-leave { transform: translateY(0%); transition: .3s ease-in-out; &.slide-leave-active { transform: translateY(-100%); } } /* CSS for the submenu container needed to adjust the behavior to our needs. Try commenting out this part to see how the animation looks without the container involved. */ ponent-container { height: $component-height; // set to the width of your component or a higher approximation if it's not fixed min-width: $component-width; // set to the width of your component or a higher approximation if it's not fixed }

完整的例子&演示请查看 blog.lunarlogic.io/2018/slidedown-菜单中的反应/ 。

For the full example & demo check out blog.lunarlogic.io/2018/slidedown-menu-in-react/.