Блог

Я пытаюсь реализовать звездное голосование с помощью потрясающих значков шрифта, на Product.js у меня есть 2 компонента, проблема в том, что когда я меняю стиль для компонента, у которого есть prop, естественно, он изменяет другой компонент из-за querySelectorAll , так как я могу изменить класс только для компонента, у которого есть реквизиты, которые я передаю.

Product.js

 const [rating, setRating] = useState(0);
const ratingHandler = (e) => {
    setRating(e);
  };
 <Rating  handleRating={ratingHandler} />
 <Rating />
 

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

 const Rating = (handleRating = false) => {
  useEffect(() => {
    if (handleRating) {
      hover();
    }
  }, []);

 function hover() {
    const spans = document.querySelectorAll(".ratinger span:not(.texting)");
    console.log(spans);
    spans.forEach((spanon) => {
      const onStar = parseInt(spanon.dataset.value, 10);
      spanon.onmouseover = () => {
        spans.forEach((span) =>
          span.dataset.value <= onStar
            ? span.classList.add("hover")
            : span.classList.remove("hover")
        );
      };
      spanon.onmouseout = () => {
        spans.forEach((span) => {
          span.classList.remove("hover");
        });
      };
      spanon.onclick = () => {
        spans.forEach((span) =>
          span.dataset.value <= onStar
            ? span.classList.add("onclick")
            : span.classList.remove("onclick")
        );
        handleRating(parseInt(spanon.dataset.value, 10));
      };
    });
  }
 

я не добавлял ненужные части ниже, у меня есть значки внутри div.

Попробуйте:

 const node = ReactDOM.findDOMNode(this);
const spans = node.querySelectorAll('...');