Javascript 仅切换类选定元素，反应JS

我试图在我的一个react组件中切换类。在阶段开始时，元素将由图像和隐藏（禁用）描述表示。每当用户悬停元素时，我只想将类display添加到悬停的元素，而不是所有子组件。 在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>
        );
    }
} 

问题的图像说明。

---

我可能会违反论坛的规则，因为我已经在这里问了一个问题：，但是我没有得到任何具体的答案。因此，我再次询问。

问题是

ProjectItem

的本地状态应用于

this.props.projects.map

中的每个项目。我建议改为映射

projects

父组件中的项目，如下所示：

this.state.proj.map（（项目，索引）=>{
回来
}

让容器成为您希望在悬停时切换的类

return(    
    <div className={"row" + (this.state.hover?"container":"")} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={{borderStyle:'solid',borderWidth:'0.3px',padding:'5px 0 0 0'}}>
        something
        </div>)

及

希望这些帮助。这是在我的电脑工作，让我知道如果你有一些麻烦

return(    
    <div className={"row" + (this.state.hover?"container":"")} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={{borderStyle:'solid',borderWidth:'0.3px',padding:'5px 0 0 0'}}>
        something
        </div>)

toggleHover(e){
        console.log("is hovering")
        this.setState({"hover":!this.state.hover})
    }

constructor(props){
        super(props)

        this.state = {
            hover:false
        }
        this.toggleHover = this.toggleHover.bind(this)
    }