切换 class 仅选定元素，React JS

Question

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

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

父组件

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 组件。希望这对您有所帮助！

Answer 2

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

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)
    }

希望对您有所帮助。这是在我的电脑上运行，如果您遇到问题，请告诉我

切换 class 仅选定元素，React JS

Toggle class only selected element, React JS

javascript

css

toggle

reactjs