React Как получить доступ или изменить соседский (sibling) элемент?

Question

Подскажите, пожалуйста как менять состояние соседского элемента. Вот на простом примере

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 Я прочитал что для таких проблем вроде как необходимо использовать рефы , но что-то пока не пришло понимание, как с ними работать. Есть ли решение данной задачи для функциональных компонентов ?

Answer 1

Для таких задач используется библиотека classNames

import React from "react";
import classNames from 'classnames';

class Item extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    }
  }

  open = () => {
   this.setState({isOpen: true})
  };

  render() {
    return (
      <div className="item">
        <div className={classNames("itemBlock", isOpen ? "itemBlockOpen" : "")}></div>
        <button className="btnClick" onClick={this.open}>
          {" "}
          clickMe
        </button>
      </div>
    );
  }
}

export default Item;

Answer 2

Function component


export const Item = () => {
    const [isBtnClicked, setIsBtnClicked] = useState(false)
    
    const setBtnClicked = () => {
        setIsBtnClicked(true)
    }
    
    const open = () => {
        setBtnClicked()
    }
    
    return (
        <div className='item'>
            <div className='itemBlock'></div>
            <button
                className={`btnClick ${isBtnClicked ? "someClass" : ''}`}
                onClick={open}
            >
                {' '}
                clickMe
            </button>
        </div>
    )
}

Class component

class Item extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isBtnClicked: false,
        };
    }

    setBtnClicked = () => {
        this.setState({
            isBtnClicked: true,
        });
    };

    open = () => {
        this.setBtnClicked();
    };

    render() {
        return (
            <div className='item'>
                <div className='itemBlock'></div>
                <button
                    className={`btnClick ${
                        this.state.isBtnClicked ? 'someClass' : ''
                    }`}
                    onClick={this.open}>
                    {' '}
                    clickMe
                </button>
            </div>
        );
    }
}

With refs

export function App() {
  const btnRef = useRef(null);
  useEffect(() => {
    btnRef.current.classList.add("someClass");
  }, []);

  return (
    <div className="item">
      <div className="itemBlock"></div>
      <button className={`btnClick`} ref={btnRef}>
        {" "}
        clickMe
      </button>
    </div>
  );
}

Answer 3

В Реакте у вас есть такая штука, как состояние(state). При клике на кнопку вы можете изменять объект state, в котором можете положить ключ isActive

Пример:

import React from "react";

export default class Item extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     isActive: false
    }
  }

  handleOpen = () => {
    this.setState({
     isActive: true
    })
  };

  render() {
    const activeClassItem = this.state.isActive ? 'itemBlock_active' : '';
    return (
      <div className="item">
        <div className={`itemBlock ${activeClassItem}`}  />
        <button className="btnClick" onClick={this.handleOpen}>
          {" "}
          clickMe
        </button>
      </div>
    );
  }
}

Пример

Upd: Поправил, чтобы не появлялся лишний класс false

БЛОГ НА HUSL

React Как получить доступ или изменить соседский (sibling) элемент?

Ответы (3 шт):