#reactjs #components
#reactjs #Компоненты
Вопрос:
Я пытаюсь реализовать звездное голосование с помощью потрясающих значков шрифта, на 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.
Ответ №1:
Попробуйте:
const node = ReactDOM.findDOMNode(this);
const spans = node.querySelectorAll('...');