时间戳

首页 > 解决方案 > React 动态设置多个状态

javascript - React 动态设置多个状态

问题描述

我正在学习 React，目前正在玩传递数据。

我有 5 张卡片的信息以如下状态存储：

state = {
    cards: [
        { id: 1, name: "p1", value: "Prize 1", imageSrc: "/path/to/image", bgColor: { background: "#FF6384", border: "4px solid #FF6384" } },
        { id: 2, name: "p2", value: "Prize 2", imageSrc: "/path/to/image", bgColor: { background: "#4BC0C0", border: "4px solid #4BC0C0" } },
        { id: 3, name: "p3", value: "Prize 3", imageSrc: "/path/to/image", bgColor: { background: "#FFCE56", border: "4px solid #FFCE56" }},
        { id: 4, name: "p4", value: "Prize 4", imageSrc: "/path/to/image", bgColor: { background: "#67bd42", border: "4px solid #67bd42" } },
        { id: 5, name: "p5", value: "Prize 5", imageSrc: "/path/to/image", bgColor: { background: "#c931f7", border: "4px solid #c931f7" }}
    ],
    flipped: null,
   };

我用迭代显示它们，如下所示：

<div className="prize-cards-inner">
                {this.state.cards.map((card) => {
                    return (
                        <section key={card.id} className="prize-card-container">
                            <div
                                className={`prize-card ${
                                    this.state.flipped === card ? "flipped" : ""
                                    }`}
                                onClick={() => this.clickHandler(card)}
                            >
                                <div className="front">
                                    <div className="card-name-div" style={ card.bgColor }>
                                        {card.value}
                                    </div>
                                    <div className="prize-image-div" >
                                        <img className="prize-image"  src={card.imageSrc} alt="test" /> 
                                        
                                    </div>
                                    <div className="slot-name-div" style={card.bgColor}>
                                       <p> {card.name}</p>
                                    </div>
                                </div>
                                <div className="back">Prize</div>
                            </div>
                        </section>
                    );
                })}
                
            </div>

并以此处理卡片点击：

    clickHandler = (card) => {
    if (this.state.flipped) {
        return;
    }
    this.setState({
        flipped: card,
        ***Set another state for all other cards (how do I say "set the state of all cards that aren't this card?")***
    });

};

我想在为点击的卡片设置状态的同时为点击的卡片之外的所有其他卡片设置状态。我不知道如何做我想做的事，所以我用星号标记了我不确定的部分。在此先感谢您的时间。

标签： javascriptreactjs

解决方案

我想你正在寻找这个：

clickHandler(card) {
 if (this.state.flipped) {
   return;
 }

 this.setState((state) => ({
   flipped: card,
   cards: state.cards.map((c) => (
     // If the card we are mapping is not the flipped card add someOtherState to it 
     c === card ? c : { ...c, someOtherState: 'some value'};
   )),
 });
};

我建议您立即开始使用带有 React 钩子的功能组件。它们提供了更好的开发者体验

推荐阅读