Блог

Главная - Вопросы по программированию - Написание программы в react при наведении курсора мыши на родительский элемент добавление дочернего элемента к соответствующему родительскому элементу

Написание программы в react при наведении курсора мыши на родительский элемент добавление дочернего элемента к соответствующему родительскому элементу

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Я хочу написать программу в react jsx при наведении курсора мыши на элемент, предположим <li> 

 <li><a>Pakistan cricket won the match</a></li>
<li><a>We should exercise every day</a></li>

и добавьте эти дочерние элементы в <li> соответствующий элемент

 <img src='...' />
<p>details  of header</p>
<button>add to favorite</button>

При наведении курсора мыши на <li> элемент соответствующие дочерние элементы должны быть удалены

Примечание: при наведении курсора дочерние элементы должны быть работоспособными

Комментарии:

1. Вместо этого я бы предложил добавить эти элементы перед с display: none помощью (вы можете добавить их в класс для удобства) и переключать их отображение при наведении курсора мыши на родительский элемент.

Ответ №1:

Итак, в основном вам нужно иметь OnMouseEnter и onMouseLeave для родительских элементов и создать состояние, в котором указано, показывать ли дополнительные данные вот простой пример

 import "./styles.css";
import {useState} from 'react'

function Children(){
  return (
    <>
        <img src='https://picsum.photos/200/300' />
        <p>details  of header</p>
        <button>add to favorite</button>
    </>
  )
}

function Parent() {
  const [isMouseOver,setIsMouseOver] = useState(false)

  const handleEnter = () => {
    setIsMouseOver(true)
  }

  const handleLeave = () => {
    setIsMouseOver(false)
  }
  return(
    <div onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
      <h1>Hover me</h1>
      {isMouseOver ?
      <>
        <Children />
      </>:
      null
      
    }
    </div>
  )
}

export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

Аналогично, вы должны изменить родительский компонент на свой li и дополнительные данные, которые должны быть видны дочернему компоненту.

Обратите внимание, что в этом примере h1 является блочным компонентом, поэтому вы должны оставить весь блок, чтобы данные исчезли

демонстрация на: https://codesandbox.io/s/silly-dewdney-d8btf?file=/src/App.js:0-738

Ответ №2:

Вы можете добавить некоторый класс и в соответствующем CSS обработать mouseover ( :hover ) .

App.js

 import "./styles.css";

function ListItem({i})
{
  return (
    <li className="listitem">
      <a href="stackoverflow.com">Link{i}</a>
      <img className="hideele" src="" alt={i} />
      <p className="hideele">Para{i}</p>
      <button className="hideele">Button{i}</button>
    </li>
  );
}

export default function App() {
  return (
    <div className="App">
      <ul>
        <ListItem i={1} />
        <ListItem i={2} />
        <ListItem i={3} />
      </ul>
    </div>
  );
}

Index.js

 import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

CSS:

 .App {
  font-family: sans-serif;
}
.listitem:hover .hideele {
  display: block;
}
.hideele {
  display: none;
}
Метки: