javascript - 切换类仅选择的元素，React JS

Question

我正在尝试在我的一个 react 组件中切换类。在该阶段的开始，元素将被表示为图像和隐藏(禁用)描述。每当用户悬停元素时，我只想将类显示添加到悬停的元素，而不是所有子组件。在 jquery 中通常我会做 $(this).addClass("display")，但在 react 中我无法弄清楚。

我看过很多帖子和教程，但找不到任何相关内容。到目前为止，这是我的代码:

父组件

import React, {Component} from 'react';
import ProjectItem from './ProjectItem';

let projects = [
  {
    name: 'Web Development Using PHP',
    techUsed : [
      'HTML5',
      'CSS3',
      'PHP'
    ],
    link : 'sample_link',
    img : 'asset/img/movie_catalog.png'
  },
  {
    name: 'Movie Catalog',
    techUsed : [
      'HTML5',
      'CSS3',
      'ReactJS',
      'JavaSript',
      'RESTAPI'
    ],
    link : 'sample_link',
    img : 'asset/img/fma_web.png'
  },
  {
    name: 'Web Development',
    techUsed : [
      'HTML5',
      'CSS3'
    ],
    link : 'sample_link',
    img : 'asset/img/fma_web.png'
  }
];

//Projects Component
export default class Projects extends Component{
  constructor(){
    super();
    this.state = {
      proj : projects
    }
  }

  //handle mouse enter 
  handleMouseEnter = () =>{
    this.setState({
      isHovered : true
    });
  }
  //handle mouse leave
  handleMouseLeave = () =>{
    this.setState({
      isHovered : false
    });
  }

  //render the component
  render(){


    return(
      <section className="projects">
        {/*section project wrapper*/}
        <div className="p-wrapper">
          <h1 className="title">Projects</h1>
          <hr/>
          {/*projet wrapper*/}
          <ProjectItem projects = {this.state.proj} /> 
        </div>
      </section>
    );
  }
}

子组件

import React, {Component} from 'react';

//export the component
export default class ProjectItem extends Component{
    constructor(){
        super();
        this.state = {
            isHovered : false
        }
    }
    //handle mouse enter 
    handleMouseEnter = () =>{
        this.setState({
            isHovered : true
        });
    }
    //handle mouse leave
    handleMouseLeave = () =>{
        this.setState({
            isHovered : false
        });
    }
    //render the project item component
    render(){
        let display = "";
        //assign the class based on the state of display
        if(this.state.isHovered === true){
            display = "active";
        }else{
            display = "disable";
        }

        return(
            <div className="projects-wrapper">
                {
                    this.props.projects.map((project, index) =>{
                        return(
                            <div className="project-item"  key={index} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*FMA Web development*/}
                                <div className={"p-description " + display}>
                                <p>{project.name}</p>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
                                </div>
                                <div className="p-image">
                                <img src="asset/img/fma_web.png" alt="FMA Web Development"/>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
} 

CSS

/*Projects Start*/
.projects{
  width: 100%;
}

.p-wrapper{
  margin: 0 auto;
  width: 90%;
  height: 100%;
}
.projects-wrapper{
  margin-top: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.project-item{
  margin: 1rem;
  width: 30%;
  position: relative;
  box-shadow: 2px 3px 37px -5px rgba(0,0,0,0.84);
}
.p-description{
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(43, 40, 40, 0.61);
  color: white;
}
.p-description p {
  margin: 1rem;
}
.p-title{
  margin: 1rem;
}
.active{
  display: block;
  transition: all 2s ease-in;
}
.disable {
  display: none;
}

问题的图像说明。

我可能违反了论坛规则，因为我已经在这里问过这个问题:LINK ，但是我还没有得到任何具体的答案。所以，我再问一次。

Answer 1

问题在于 ProjectItem 的本地状态应用于 this.props.projects.map 中的每个元素。我建议改为将元素映射到 Projects 父组件中，如下所示:

this.state.proj.map((proj, index) => {
  return <ProjectItem project = {proj} /> 
}

然后重构您的 ProjectItem 组件。希望这对您有所帮助!