如何在锚点的onClick事件中修改另一个React组件的state？

你的问题核心是React组件间的状态控制——父组件（Card）需要触发子组件（PropertyLightbox）的状态变化。这里我们可以用状态提升的方案来解决，把控制lightbox显示的状态放在父组件中，再通过props传递给子组件。

先帮你修正代码里的错误，再给出完整实现：

第一步：修改Card组件（父组件） #

原来的Card是函数组件，不能用this，我们需要在这里添加状态和控制方法：

import React, { useState } from 'react'
import PropertyLightbox from '../global/PropertyLightbox'

const Card = (props) => {
  const propertyImages = props.gallery
  // 定义控制lightbox显示/隐藏的状态
  const [isLightboxOpen, setIsLightboxOpen] = useState(false)

  // 打开lightbox的方法
  const openLightbox = (e) => {
    e.preventDefault() // 阻止a标签的默认跳转行为
    setIsLightboxOpen(true)
  }

  // 关闭lightbox的方法（传递给子组件用）
  const closeLightbox = () => setIsLightboxOpen(false)

  return (
    <Property id={props.slug}>
      <a onClick={openLightbox} href="#">Click to open lightbox</a>
      {/* 把状态和关闭方法传递给子组件 */}
      <PropertyLightbox 
        lbImages={propertyImages} 
        isOpen={isLightboxOpen}
        onClose={closeLightbox}
      />
    </Property>
  )
}

export default Card

第二步：修改PropertyLightbox组件（子组件） #

子组件不再自己维护显示状态，而是通过父组件传递的isOpen props来控制UI，同时用onClose props来触发关闭：

如果是函数组件： #

import React from 'react'

const PropertyLightbox = ({ lbImages, isOpen, onClose }) => {
  // 如果isOpen为false，直接不渲染
  if (!isOpen) return null

  return (
    <div className="lightbox-overlay">
      {/* 关闭按钮，调用父组件传来的close方法 */}
      <button className="lightbox-close" onClick={onClose}>×</button>
      {/* 渲染图片列表 */}
      <div className="lightbox-images">
        {lbImages.map((image, index) => (
          <img 
            key={index} 
            src={image.url} 
            alt={image.description || `Property image ${index + 1}`}
          />
        ))}
      </div>
    </div>
  )
}

export default PropertyLightbox

如果是类组件： #

import React, { Component } from 'react'

class PropertyLightbox extends Component {
  render() {
    const { lbImages, isOpen, onClose } = this.props
    if (!isOpen) return null

    return (
      <div className="lightbox-overlay">
        <button className="lightbox-close" onClick={onClose}>×</button>
        <div className="lightbox-images">
          {lbImages.map((image, index) => (
            <img 
              key={index} 
              src={image.url} 
              alt={image.description || `Property image ${index + 1}`}
            />
          ))}
        </div>
      </div>
    )
  }
}

export default PropertyLightbox

核心原理说明 #

• 状态提升：把原本属于子组件的显示状态，移到父组件中管理，这样父组件的事件（a标签的onClick）就能直接修改这个状态。
• Props传递：父组件把状态（isOpen）和修改状态的方法（onClose）传递给子组件，子组件根据isOpen决定是否显示，通过onClose通知父组件关闭lightbox。
• 修正了原代码的错误：函数组件不能用this，所以直接定义openLightbox函数并在onClick中引用；同时用e.preventDefault()阻止a标签的默认跳转，比href="javascript:;"更规范。

内容的提问来源于stack exchange，提问作者Darren