Подскажите, пожалуйста как менять состояние соседского элемента. Вот на простом примере
import React from "react";
class Item extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
open = () => {
console.log("this", this);
/// this.siblings(".itemBlock").classList.add("active"); /// Почему это не срабатывает
console.log("this.myRef.current", this.myRef.current);
this.myRef.current.siblings(".itemBlock").classList.add("active"); ///Почему это не срабатывает ?
};
render() {
return (
<div className="item">
<div className="itemBlock"></div>
<button className="btnClick" onClick={this.open} ref={this.myRef}>
{" "}
clickMe
</button>
</div>
);
}
}
export default Item;
Хочу понять, как по нажатию на кнопку добавить класс соседскому элементу (".itemBlock")
, который находиться в одном и том же item
Я прочитал что для таких проблем вроде как необходимо использовать рефы , но что-то пока не пришло понимание, как с ними работать. Есть ли решение данной задачи для функциональных компонентов ?