Как показать состояние наведения для 1 элемента карты, к которому прикреплено событие-обработчик нескольких элементов карты? - PullRequest
Новая
       13

Как показать состояние наведения для 1 элемента карты, к которому прикреплено событие-обработчик нескольких элементов карты?

0 голосов
/ 28 августа 2018

Я новичок в React, пытаюсь создать панель с компонентами карты. У меня есть компонент React, который отображает элементы карты, и для каждой карты имеет одинаковые обработчики событий для mouseenter и mouseleave. Ожидаемое поведение - видеть стили :hover, когда мышь наводит курсор на один виджет. Однако я вижу 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;

1 Ответ

0 голосов
/ 28 августа 2018

Я бы посоветовал вам извлечь отдельные элементы в новый класс, где вы можете обрабатывать состояние наведения так, как вы хотите, вот так: 

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