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{&nbsp; &nbsp; constructor(props){&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.someHandler = this.someHandler.bind(this);&nbsp; &nbsp; &nbsp; &nbsp; this.someOtherHandler = this.someOtherHandler.bind(this);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeCard: 0&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; &nbsp; someOtherHandler() {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeCard: 0&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; someHandler(activeCardIndex) {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeCard: activeCardIndex&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className ="FlexContainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OneCard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 className="CardTitle"> Part One </h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="CardSeparator"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className={this.state.activeCard === 1 ? 'CardButtonHover' : 'CardButton'} onMouseEnter={() => this.someHandler(1)} onMouseLeave={this.someOtherHandler}> Click Here</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </OneCard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OneCard >&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 className="CardTitle"> Part One </h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="CardSeparator"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className={this.state.activeCard === 2 ? 'CardButtonHover' : 'CardButton'} onMouseEnter={() => this.someHandler(2)} onMouseLeave={this.someOtherHandler}> Click Here</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </OneCard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OneCard > </OneCard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OneCard > </OneCard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OneCard >&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 className="CardTitle"> Part One </h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="CardSeparator"> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className={this.state.activeCard === 3 ? 'CardButtonHover' : 'CardButton'} onMouseEnter={() => this.someHandler(3)} onMouseLeave={this.someOtherHandler}> Click Here</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </OneCard>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}export default OneHome;