Javascript 对另一个组件的ReactJS onClick事件

如何在锚点上使用

onClick

在另一个组件内设置状态

Card.js带有

onClick

import React from 'react'
import PropertyLightbox from '../global/PropertyLightbox'

const Card = (props) => {
    const propertyImages = props.gallery
    return (
        <Property id={props.slug}>
          <a onClick={this.openLightbox} href="javascript:;">Click to open lightbox</a>
          <PropertyLightbox lbImages={propertyImages}/>
        </Property>
    )
}
export default Card

你可以

• 将您的卡组件转换为类并为其指定状态：

  hasOpenLightBox

• 在

  this.openLightbox中，将
  hasOpenLightBox
  设置为
  true

---

• 给PropertyLightbox一个道具：

  谢谢。我试图避免将卡组件设置为类。再次干杯。
  class propertyLightbox extends React.Component {
      constructor() {
          super();
          this.state = { currentImage: 0 };
          this.openLightbox = this.openLightbox.bind(this);
      }
  
      openLightbox(event, obj) {
          this.setState({
              currentImage: obj.index,
              lightboxIsOpen: true,
          });
      }
      render() {
        return (
              <Lightbox images={this.props.propertyImages}
              isOpen={this.state.lightboxIsOpen}
              </Lightbox>
        )
      }
  }
  
  propertyLightbox.propTypes = {
      propertyImages: PropTypes.func,
  }
  
  export default propertyLightbox