Question

我是React的初学者，试图用卡片组件构建仪表板。我有一个可渲染卡片元素的React组件，并且对于每张卡片，mouseenter和mouseleave具有相同的处理程序事件。预期的行为是在鼠标悬停在一个小部件上时查看:hover样式。但是，我看来是{strong> ALL 具有:hover风格的小部件。我如何更改代码，以便仅将鼠标悬停在其上的一个显示悬浮状态，而不是全部？

class Board extends Component {
  constructor(props) {
    super(props) {
    this.showHoverBorder = this.showHoverBorder.bind(this);
    this.hideHoverBorder = this.hideHoverBorder.bind(this);

    this.state = {
      isHoverStyleOn: false,
      layouts: {
        lg: [
          { i: "a", x: 0, y: 0, w: 1, h: 1 },
          { i: "b", x: 2, y: 0, w: 1, h: 1 },
          { i: "c", x: 2, y: 0, w: 1, h: 1 },
          { i: "d", x: 3, y: 0, w: 1, h: 1 },
          { i: "e", x: 0, y: 1, w: 1, h: 1 },
          { i: "f", x: 0, y: 1, w: 1, h: 1 } 
        ]}
    }

    showHoverBorder() {
      this.setState({ isHoverStyleOn: true })
    }

    hideHoverBorder(hmm) {
      this.setState({ isHoverStyleOn: false })
    }
 }

render() {        
    let widget = "widget";
    if(this.state.isHoverStyleOn) {
      widget += ' widget-hover';
    } else { widget = "widget"; }

    return (
      <div layouts={this.state.layouts}>
        {this.state.layouts.lg.map((w) => ((
          <div key={w.i} className={widget}>
            <div className="widget-body">
              <div className="widget-bar" onMouseEnter={this.showHoverBorder} onMouseLeave={this.hideHoverBorder}>
              </div>
              <div className="widget-graph"></div>
            </div>
          </div>
        )))}
      </div>
    )
  }
}

export default Board;

Answer 1

我建议您将单个项目提取到一个新类中，您可以在其中处理悬停状态，如下所示：

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
        isHoverStyleOn: false,
        layouts: {
            lg: [
                { i: "a", x: 0, y: 0, w: 1, h: 1 },
                { i: "b", x: 2, y: 0, w: 1, h: 1 },
                { i: "c", x: 2, y: 0, w: 1, h: 1 },
                { i: "d", x: 3, y: 0, w: 1, h: 1 },
                { i: "e", x: 0, y: 1, w: 1, h: 1 },
                { i: "f", x: 0, y: 1, w: 1, h: 1 }
            ]
        }
    };
}

render() {
    return (
        <div layouts={this.state.layouts}>
            {this.state.layouts.lg.map(w => (

                <Item w={w} />

            ))}
        </div>
    );
  }
}

提取的项目组件

class Item extends Component {
  state = {
    active: false
  };

  hover = () => {
    this.setState({
        active: !this.state.active
    });
  };

  render() {
    const { w } = this.props;
    const { active } = this.state;

    return (
        <div key={w.i} className={!active ? "widget" : "widget widget-hover"}>
            <div className="widget-body">
                <div
                    className="widget-bar"
                    onMouseEnter={() => this.hover()}
                    onMouseLeave={() => this.hover()}
                >
                    <h1>test</h1>
                </div>
                <div className="widget-graph" />
            </div>
        </div>
    );
  }
}

如何显示已将处理程序事件附加到多个卡元素的1个卡元素的悬停状态？

1 个答案: