react - 访问组件外的状态

Question

我明白这是否看起来像一个菜鸟问题，但我正在尝试教自己做出反应。

上下文是，我创建了一个包含多个CardItem组件的Card组件。 每当单击 CardItem 的主 div 时，同一 CardItem 内的clicked状态就会从 false 变为 true； 我希望从Cards组件访问CardItem组件的clicked状态。

我的代码如下：

卡片.js

import React, { Component } from 'react'
import Carditem from './Carditem'
import "./Cards.css"

export class Cards extends Component {
    constructor(props) {
        super(props)
    
        this.state = {childClicked: 0}

        this.handler = this.handler.bind(this)
    }

    handler(){
        this.setState((ps)=>({
            childClicked: ps + 1
        }))        
    }


    render() {
        console.log(this.state.childClicked)
        return (
            <div>
                <div className="cards">
                    <Carditem cardTitle="Online membership" cardPrice="€150"></Carditem>
                    <Carditem cardTitle="Deluxe package" cardPrice="€400" onClick={this.handler} ></Carditem>
                    <button className={this.childClicked >= 1 ? 'child-clicked-class' : 'no-child-clicked-class'}>Button</button>
                </div>
            </div>
        )
    }
}

export default Cards

卡片项目.js

import React, { Component } from 'react'
import "./Carditem.css"

export class Carditem extends Component {

    constructor(props) {
        super(props)

        this.state = {clicked: false}

        this.toggleClick = this.toggleClick.bind(this)
    }

    toggleClick(){
        this.setState((prevstat) => ({
            clicked: !prevstat.clicked
        }))
    }
    
    render() {
        const {cardTitle, cardPrice } = this.props

        return (
            <div className={`card card-light ${this.state.clicked ? 'card-light-clicked' : 'card-light'}`} onClick={this.toggleClick}>
                <h2 className="card-title">{cardTitle}</h2>
                <p className="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, dsadas,usnaytw iunxgafu.</p>
                <span className="card-price">{cardPrice}</span>
            </div>
            
        )
    }
}

export default Carditem

我希望的最终结果是，如果任何CardItem组件的状态为 true，则更改Cards按钮的类名。

提前致谢。

Answer 1

您将点击处理程序作为名为onClick道具从父Card传递到子CardItem ，您必须访问该道具并在单击子项中的项目时切换它，因此您必须在函数toggleClick调用它：

toggleClick(){
    this.setState((prevstat) => ({
        clicked: !prevstat.clicked
    }))
    this.props.onClick()
}