ReactJS：创建鼠标悬停事件时出现重复

Question

我正在尝试在我的 React 项目中创建卡片。我当前的项目 问题是我创建了重用相同类的 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;