如何在点击反应时为唯一一个元素切换类答案

【问题标题】：How to toggle class for the only one element on click in react如何在点击反应时为唯一一个元素切换类
【发布时间】：2018-06-25 15:18:34
【问题描述】：

我正在尝试在 React 中制作一组翻转的卡片。你可以在下面看到我的代码。当我点击卡片时，它们都翻转了，但我的目标是只翻转我点击的那些。我该怎么做？

这是我的卡片组件：

import React from 'react';

export default class Card extends React.Component {
    render() {
        let className = this.props.condition ? 'card-component flipped' : 'card-component';
        return (
            <div onClick={this.props.handleClick} className={className}>
                <div className="front">
                    <img src={this.props.image} alt="card"/>
                </div>
                <div className="back">
                </div>
            </div>);
    }
}

这是我的 Deck 组件：

import React from 'react';
import Card from './Card.js';

const cardlist = require('../cardlist').cardlist;

export default class Deck extends React.Component{
    constructor(props) {
        super(props);
        this.state = {flipped: false};
    }
    handleClick() {
        this.setState({flipped: !this.state.flipped});
    }
    render() {
        const list = this.props.cards.map((card, index) => {
            return <Card
                         key={index}
                         handleClick={this.handleClick.bind(this)}
                         condition={this.state.flipped}
                         image={cardlist[card].path}
                    />});
        return(
            <ul>
                {list}
            </ul>)
    }
};

谢谢！

【问题讨论】：

您需要在每个卡片中存储某种id，并将id 传递回处理程序。这样您就可以跟踪点击了哪张卡片，然后更改其状态。

标签： javascript list reactjs class toggle

【解决方案1】：

您可以使用索引。

export default class Deck extends React.Component{
    constructor(props) {
        super(props);

        //flipped true nonflipped false
        this.state = {
         flipStatus : props.cards.map((element) => false)
        }
    handleClick(index) {

        const newflipStatus = [...this.state.flipStatus]
        newflipStatus[index] = !this.state.flipStatus[index]
        this.setState({flipStatus: newflipStatus);
    }
    render() {
        const list = this.props.cards.map((card, index) => {
            return <Card
                         key={index}
                         handleClick={this.handleClick.bind(this)}
                         condition={this.state.flipped}
                         index={index}
                         image={cardlist[card].path}
                         flipped=this.state.flipStatus[index]

                    />});
        return(
            <ul>
                {list}
            </ul>)
    }
};

这是你的卡片组件

export default class Card extends React.Component {
    render() {
        let className = this.props.condition ? 'card-component flipped' : 'card-component';
        return (
            <div onClick={() => this.props.handleClick(this.props.index)} className={className}>
                {!flipped && <div className="front">
                    <img src={this.props.image} alt="card"/>
                </div>}
                {flipped && <div className="back">
                </div>}
            </div>);
    }
}

【讨论】：

它工作，但我会改变 {!flipped &&
} 让 className = this.props.flipped ？ '卡片组件翻转' : '卡片组件';

【解决方案2】：

在 handleClick 函数中，您正在为整个牌组设置“翻转”状态变量，而不是为单张牌，这就是整个牌组一起变化的原因。解决方案很简单，让每张卡片都有一个状态来指定它是否被翻转，而不是在父级上制作变量

【讨论】：