javascript - How to toggle class for the only one element on click in react - Stack Overflow

admin管理员组

文章数量:1304877

I am trying to make a flipped set of cards in React. You can see my code below. When I click on the card, they all flipped, but my goal is to flip only those that i clicked on. How can I do this?

This is my card ponent:

import React from 'react';

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

Here is my Deck ponent:

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>)
    }
};

Thank you!

I am trying to make a flipped set of cards in React. You can see my code below. When I click on the card, they all flipped, but my goal is to flip only those that i clicked on. How can I do this?

This is my card ponent:

import React from 'react';

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

Here is my Deck ponent:

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>)
    }
};

Thank you!

• javascript
• list
• reactjs
• class
• toggle

Share Improve this question Follow asked Jan 16, 2018 at 20:29 Lev VysokiyLev Vysokiy 7311 silver badge55 bronze badges 1

• you need to store your cards with some kind of id per each and pass the id back to the handler. this way you will be able to follow which card has been clicked, then change its state. – Sagiv b.g Commented Jan 16, 2018 at 20:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can make use of indexes.

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>)
    }
};

here is your card ponent

export default class Card extends React.Component {
    render() {
        let className = this.props.condition ? 'card-ponent flipped' : 'card-ponent';
        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>);
    }
}

in the handleClick function you are setting the "flipped" state variable for the whole deck not for a single card, that's why the whole deck changes together. the solution would be simple to have a state for each card to designate if it's flipped or not, rather than making the variable on the parent level

本文标签： javascriptHow to toggle class for the only one element on click in reactStack Overflow