Question

我创建了一个滑动覆盖层，我想通过单击关闭按钮来关闭该覆盖层，但是我不知道该怎么做。我试图使用refs并将一个类添加到函数中以将其关闭，但它不起作用。一般来说，我不知道如何在其他事件中触发事件。有人可以帮我吗？

import React, {Component} from 'react';
import Swiper from 'react-id-swiper';
import { Grid, Row, Col, Image } from 'react-bootstrap';
import '../styles/Swiper.css';
import '../styles/SwiperGraphic.css';

export default class SwiperComponent extends Component{

constructor(props){
    super(props);

}

closeSwiper() {
     //add a class
}

render(){

    let swiperDiv = this.refs.SwiperDiv;

    const params = {

        rebuildOnUpdate : true,
        slidesPerView: 1,
        grabCursor: true,
        direction: 'horizontal',

      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,

      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      spaceBetween: 100
    }

    return(
        <div ref={this.refs.swiperDiv}>
            <Swiper {...params} key={this.props.slides.length} >
                 {this.props.slides.map((slide) =>{
                        return <div><Image responsive className={(slide.w == '600' ? 'swiperImg600Padding' : 'null')} src={slide.url} slide={slide} key={slide.tit} width={slide.w} height={slide.h} /></div>
                    })}
            </Swiper>

            <div className="swiper-close-button" onClick={this.closeSwiper.bind(this)}><Image src="/assets/img/close-swiper-graphic.svg" width="50" height="50" /></div>
        </div>
    )

}

}

Answer 1

有很多方法可以解决此问题，但实际上，您希望在组件状态下有条件地使用布尔值呈现swiper。

因此您的代码可能最终看起来像这样，但这并不是最完美的处理方式，您可能希望从要从其调用它的父组件中切换SwiperComponent的呈现： / p>

list($month, $day, $year) = explode("/", $_GET["date"]);
$date = sprintf("%d-%02d-%02d", $year, $month, $day);

话虽如此，您的实现表明您还不太了解如何正确使用React，并且您仍在考虑jQuery实践中的类切换等功能，因此，我建议您阅读一些文档并仔细阅读本教程了解如何利用状态的力量。

Answer 2

您应该使用React.createRef在构造函数中创建ref，（而不是在render函数中）在div上进行设置，然后可以使用.current在处理函数中引用它，然后您就可以执行任何操作需要配合它：

export default class SwiperComponent extends Component{

    constructor(props){
        super(props);
        this.swiperRef = React.createRef();
    }

    closeSwiper() {
         //add a class
        this.swiperRef.current.doWhateverYouWantToIt();
    }

    render(){
        return(
            <div ref={this.refs.swiperDiv}>
                <Swiper {...params} key={this.props.slides.length} >
                   {Stuff}
                </Swiper>
                <div className="swiper-close-button"
                    onClick= {() => this.closeSwiper()}
                >
                    {Stuff}
                </div>
            </div>
        )
    }
}

编辑：另一方面，通常认为在render函数中进行绑定不是一种好习惯，可以考虑在构造函数中进行绑定，也可以使用箭头函数，正如Atul所指出的那样，您可能在此处使用了错误的函数名称？

Answer 3

因此，基本上，如果您想隐藏整个组件，则必须像

一样在父级中使用它

从'/ path到Swipercomponent'导入SwiperComponent

//bind this in constructor
changeSwiperState(showSwiper) {
    this.setState({showSwiper})
  }
render(){
    const style = this.state.showSwiper? {}:{display:'none'};
    return (
        <div style={style}>
           <SwiperComponent changeSwiperState={changeSwiperState}/>
        </div>
    )

}

从点击按钮的滑动组件中调用该功能

<div className="swiper-close-button" onClick={this.props.changeSwiperState(false)}></div>

因此，不，您始终可以切换模式，因为显示/隐藏控件与父控件一起使用。

祝你好运！

React js如何触发另一个div的事件

3 个答案: