ReactJS：在Hover事件的单个元素中添加类

Question

我正在研究一组在悬停时扩展特定div的div 我的问题是当我将鼠标悬停在一个元素上时，所有的div都会受到影响。

我不知道为什么会这样，

希望你理解我。

由于

Sample Code

constructor(props) {
    super(props);
    this.state = {
      isHovered: false
    };
    this.handleMenuHover = this.handleMenuHover.bind(this);
  }

  handleMenuHover() {
    this.setState({
      isHovered: !this.state.isHovered
    });
  }

  render() {
    const menuActive = this.state.isHovered ? "active" : "";
    return (
      <div className="slider-menu">
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          a
        </div>
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          b
        </div>
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          c
        </div>
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          d
        </div>
      </div>
    );
  }

Answer 1

使用事件处理程序创建一个div组件，然后填充它。示例：

const Home = () => (
  <div>
    <Menu>a</Menu>
    <Menu>b</Menu>
    <Menu>c</Menu>
    <Menu>d</Menu>
  </div>
)

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isHovered: false
    };
    this.handleMenuHover = this.handleMenuHover.bind(this);
  }

  handleMenuHover() {
    this.setState({
      isHovered: !this.state.isHovered
    });
  }

  render() {
    const menuActive = this.state.isHovered ? "active" : "";
    return (
      <div className="slider-menu">
        <div
          className={"menu " + menuActive}
          onMouseEnter={this.handleMenuHover}
          onMouseLeave={this.handleMenuHover}
        >
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default Home;