0

我是 React 初学者，正在尝试使用卡片组件构建仪表板。我有一个渲染卡片元素的 React 组件，并且对于每张卡片，对于mouseenter和具有相同的处理程序事件mouseleave。:hover当鼠标悬停在一个小部件上时，预期的行为是查看样式。但是，我似乎所有的小部件都具有这种: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;
4

1 回答 1

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>
    );
  }
}
于 2018-08-28T20:01:59.060 回答