ReactJS: дубликаты, возникающие при создании события мыши

Question

Я пытаюсь создать карты в своем реактивном проекте. Мой текущий проект Проблема в том, что я создал компоненты React, которые повторно используют один и тот же класс, и когда я реализую событие mouseOver для переключения между классамидля достижения эффекта перехода эффект применяется ко всем классам, имеющим один и тот же класс CSS. Как я могу избежать этого? Я считаю, что тег вызывает мои проблемы. Как разделить функциональность без особой избыточности в коде?

Обратите внимание, что я новичок.

import React,{Component} from 'react';
import './OneHome.css'
import OneCard from './OneCard.js'
class OneHome extends Component{
    constructor(props){
        super(props);
        this.someHandler = this.someHandler.bind(this);
        this.someOtherHandler = this.someOtherHandler.bind(this);
        this.state={
            buttonStyleClass:"CardButton",
        };
        }
    someOtherHandler() {
        this.setState({buttonStyleClass : "CardButton"});
    }
    someHandler() {
        this.setState({buttonStyleClass : "CardButtonHover"});
    }

    render(){
        return (
            <div className ="FlexContainer">
                <OneCard >
                    <h1 className="CardTitle"> Part One </h1>
                    <div className="CardSeparator"> </div>
                    <button className={this.state.buttonStyleClass} onMouseEnter={this.someHandler} onMouseLeave={this.someOtherHandler}> Click Here</button>
                </OneCard>
                <OneCard > 
                    <h1 className="CardTitle"> Part One </h1>
                    <div className="CardSeparator"> </div>
                    <button className={this.state.buttonStyleClass} onMouseEnter={this.someHandler} onMouseLeave={this.someOtherHandler}> Click Here</button>
                </OneCard>
                <OneCard > </OneCard>
                <OneCard > </OneCard>
                <OneCard > 
                <h1 className="CardTitle"> Part One </h1>
                    <div className="CardSeparator"> </div>
                    <button className={this.state.buttonStyleClass} onMouseEnter={this.someHandler} onMouseLeave={this.someOtherHandler}> Click Here</button>
                </OneCard>

            </div>
        );
    }
}

export default OneHome;

Answer 1

В вашем коде нет идентификатора для установки текущего элемента, на который наведен курсор. В вашем someHandler при наведении курсора вы можете передать индекс или ссылку, или какое-то ключевое слово, чтобы идентифицировать текущую карту, которая находится в процессе поиска. Затем вы можете выполнить троичную проверку, чтобы добавить класс. Вместо того, чтобы поддерживать имена классов в состоянии, вы можете добавлять / удалять их напрямую, как показано.

import React,{Component} from 'react';
import './OneHome.css'
import OneCard from './OneCard.js';

class OneHome extends Component{
    constructor(props){
        super(props);
        this.someHandler = this.someHandler.bind(this);
        this.someOtherHandler = this.someOtherHandler.bind(this);
        this.state = {
            activeCard: 0
        };
    }
    someOtherHandler() {
        this.setState({
          activeCard: 0
        });
    }
    someHandler(activeCardIndex) {
        this.setState({
          activeCard: activeCardIndex
        });
    }

    render(){
        return (
            <div className ="FlexContainer">
                <OneCard>
                    <h1 className="CardTitle"> Part One </h1>
                    <div className="CardSeparator"> </div>
                    <button className={this.state.activeCard === 1 ? 'CardButtonHover' : 'CardButton'} onMouseEnter={() => this.someHandler(1)} onMouseLeave={this.someOtherHandler}> Click Here</button>
                </OneCard>
                <OneCard > 
                    <h1 className="CardTitle"> Part One </h1>
                    <div className="CardSeparator"> </div>
                    <button className={this.state.activeCard === 2 ? 'CardButtonHover' : 'CardButton'} onMouseEnter={() => this.someHandler(2)} onMouseLeave={this.someOtherHandler}> Click Here</button>
                </OneCard>
                <OneCard > </OneCard>
                <OneCard > </OneCard>
                <OneCard > 
                <h1 className="CardTitle"> Part One </h1>
                    <div className="CardSeparator"> </div>
                    <button className={this.state.activeCard === 3 ? 'CardButtonHover' : 'CardButton'} onMouseEnter={() => this.someHandler(3)} onMouseLeave={this.someOtherHandler}> Click Here</button>
                </OneCard>

            </div>
        );
    }
}

export default OneHome;