ReactJS onClick事件到另一个组件

Question

如何在锚点上使用onClick在另一个组件内设置状态？

带有onClick Card.js

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

与PropertyLightbox.js setState openLightbox

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

Answer 1

你可以

• 将您的Card组件转换为类并为其提供状态： hasOpenLightBox
• 设置hasOpenLightBox到true的this.openLightbox
• 提供PropertyLightbox作为道具： <PropertyLightbox isOpen={this.state.hasOpenLightBox}
• setState或在基于isOpen PropertyLightbox中执行所需的任何操作