Кнопка show show on mouse enter

У меня есть реагирующий компонент, который имеет метод вроде:

mouseEnter(){
    console.log("this is mouse enter")
}

render(){
    var album_list;
    const {albums} = this.props
    if(albums.user_info){
        album_list = albums.user_info.albums.data.filter(album => album.photos).map((album => {
            return
                <div className={"col-sm-3"} key={album.id}     onMouseEnter={this.mouseEnter}>
                    <div className={(this.state.id === album.id) ? 'panel panel-default active-album' : 'panel panel-default'} key={album.id} onClick={this.handleClick.bind(this, album.id)}>
                        <div className={"panel-heading"}>{ album.name }</div>
                        <div className={"panel-body"}>
                            <img className={"img-responsive center-block"} src={album.photos.data[0].source} />
                        </div>
                    </div>
                </div>
            }))
        }
        return (
            <div className={"container"}>
                <div className="row">
                    {album_list}
                </div>
            </div>
        )
    }
}

Здесь у меня onMouseEnter на album_list. Когда он наводится или мышь вводится, я хочу отправить кнопку на этом div.

Как я могу это сделать?

Спасибо

Ответ 1

Обновите состояние компонента, чтобы отобразить, находится ли мышь внутри компонента, затем используйте значение состояния, чтобы условно отобразить кнопку.

getInitialState() {
  return {
    isMouseInside: false
  };
}
mouseEnter = () => {
  this.setState({ isMouseInside: true });
}
mouseLeave = () => {
  this.setState({ isMouseInside: false });
}
render() {
  return (
    <div onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>
      {this.state.isMouseInside ? <button>Your Button</button> : null}
    </div>
  );
}

Внутри функции рендеринга мы используем условный оператор (?), чтобы вернуть компонент кнопки, если this.state.isMouseInside является правдивым.

Ответ 2

Существует еще один подход, который использует повторно используемый компонент рендеринга, который сделает компоненты "зависающими" или "открытыми" - что бы ни было разумным.

class Hoverable extends Component {
  constructor() {
    super();
    this.state = {
      isMouseInside: false
    };
  }

  mouseEnter = () => {
    this.setState({ isMouseInside: true });
  }

  mouseLeave = () => {
    this.setState({ isMouseInside: false });
  }

  render() {
    return this.props.children(
      this.state.isMouseInside, 
      this.mouseEnter, 
      this.mouseLeave
    )
  }
}

Затем создайте функциональный компонент, представляющий элемент, который может быть нависшим. Например альбом

const HoverableElement = props => (
  <Hoverable>
    {(isMouseInside, mouseEnter, mouseLeave) => (
      <div className="menu-item"> 
        <div onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
          <h2>{props.title}</h2>
        </div>
        {isMouseInside && props.children}
      </div>
    )}
  </Hoverable>
)

Наконец, используйте HoverableElement, чтобы отобразить список элементов, каждый из которых будет "hoverable", например массив альбомов

class HoverableElementsList extends Component {
  render() {
    return (
      <div>
        <HoverableElement title="First Menu">
          <p>Some children content</p>
        </HoverableElement>
      </div>
    )
  }
}

Ответ 3

cjjenkinson, большое спасибо ваш ответ сэкономить мне много времени