React js如何觸發另一個div的事件

Question

我創建了一個 swiper 覆蓋層，我想通過單擊關閉按鈕來關閉它，但我不知道該怎么做。 我嘗試使用 refs 並向函數添加一個類來關閉它，但它不起作用。 一般來說，我不知道如何在反應中觸發另一個 div 的事件。 有人可以幫助我嗎？

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 的呈現：

export default class SwiperComponent extends Component{

constructor(props){
    super(props);
    this.state = {
      isOpen: true
    }
}

closeSwiper() {
  this.setState({
    isOpen: false
  })
}

render(){
    return(
      <div>
        {this.state.isOpen &&
            <Swiper />
        }
      </div>
    )

}
}

話雖如此，您的實現表明您還沒有真正理解如何正確使用 React，並且您仍在考慮類切換等 jQuery 實踐，因此我建議您多閱讀文檔並閱讀教程以了解如何利用國家的力量。

Answer 2

您應該使用 React.createRef 在構造函數中創建 ref，（而不是在渲染函數中）將其設置在 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>
        )
    }
}

編輯：另一方面，在渲染函數中綁定通常被認為不是一個好習慣，考慮在構造函數中進行綁定，或者使用箭頭函數，正如 Atul 指出的那樣，看起來你可能在那里有錯誤的函數名稱？

Answer 3

所以基本上如果你想隱藏整個組件，你必須在父級中使用它

從 '/path to 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>
    )

}

在按鈕單擊時從 swiper 組件調用函數

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

所以不，你總是可以切換 modal ，因為顯示/隱藏控件是父級的。

祝你好運 ！