Javascript 如何将事件触发到另一个div

我创建了一个swiper覆盖，我想通过单击关闭按钮来关闭它，但我不知道怎么做。我尝试使用refs并向函数中添加一个类来关闭它，但没有成功。一般来说，我不知道如何在react中触发另一个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>
    )

}

import React，{Component}来自'React'；
从“react id Swiper”导入Swiper；
从'react bootstrap'导入{Grid，Row，Col，Image}；
导入“../styles/Swiper.css”；
导入“../styles/SwiperGraphic.css”；
导出默认类SwipComponent扩展组件{
建造师（道具）{
超级（道具）；
}
closeSwiper（）{
//添加一个类
}
render（）{
设swiperDiv=this.refs.swiperDiv；
常量参数={
重建更新：正确，
幻灯片视图：1，
格雷博：是的，
方向：'水平'，
分页：{
el:“.swiper分页”，
键入：“子弹”，
可点击：正确，
},
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”
},
间隔：100
}
返回(
{this.props.slides.map（（slide）=>{
回来
})}
)
}

---

}

您应该使用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>
        )
    }
}

导出默认类SwipComponent扩展组件{
建造师（道具）{
超级（道具）；
this.swiperRef=React.createRef（）；
}
closeSwiper（）{
//添加一个类
this.swiperRef.current.doWhateverYouWantToIt（）；
}
render（）{
返回(
{Stuff}
this.closeSwiper（）}
>
{Stuff}
)
}
}

---

编辑：在另一个注释中，渲染函数中的绑定通常被认为是不好的实践，考虑在构造函数中使用它，或者使用箭头函数，正如阿特尔指出的，看起来您可能在函数中有错误的名称。但实际上，您希望在组件状态中有条件地使用布尔值呈现swiper

因此，您的代码可能最终看起来是这样的，但这并不是处理此问题的最优雅的方式，您可能希望从调用SwipComponent的父组件切换SwipComponent的呈现：

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>
    )

}
}

导出默认类SwipComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
伊索彭：是的
}
}
closeSwiper（）{
这是我的国家({
伊索彭：错
})
}
render（）{
返回(
{this.state.isOpen&&
}
)
}
}

---

也就是说，您的实现表明您还没有真正理解如何正确地使用React，并且您仍然在考虑jQuery实践中的类切换等问题。，因此，我建议您多阅读一些文档，并仔细阅读本教程，以了解如何利用状态的力量。

因此，基本上，如果您想隐藏整个组件，您必须在类似父级的环境中使用它

将SwipComponent从“/path导入SwipComponent”

//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>
    )

}

//在构造函数中绑定此
更改开关状态（显示开关）{
this.setState（{showSwiper}）
}
render（）{
const style=this.state.showSwiper？{}:{display:'none'}；
返回(
)
}

从swiper组件调用该函数，单击按钮

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

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

---

祝你好运

嘿，只是想澄清一下，你想隐藏/删除组件吗？不，只是想隐藏/显示显示：不，你还不清楚你想隐藏什么，你想要这个在某个父组件中使用的整个组件，对吗？我想用css动画隐藏整个组件（swiper+close按钮），不需要删除并重新创建它“无需删除它并重新创建它“-这是React的核心原则之一。您试图在其设计目的的一般限制之外使用该框架，并在过程中使事情变得困难和混乱。toggleSwiper函数在哪里？来自他的示例代码。你可能是对的，他想成为closeSwiper函数我编辑了问题切换开关Swiper是closeSwiper很抱歉搞错了Good call，我的回答显示了如何像他想的那样使用ref，但你是对的，他可能不应该在第一时间使用ref。即使我也这么想，但想澄清一下用例，基本上，隐藏/显示应该取决于属性，父状态应该决定是否显示它。一旦它被移除，打开它的唯一方法就是重新创建组件。