1

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

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

1

3 ответа 3

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>
  );
}
4
  • 1
    Или как написал @Максим Воробьев, лучше для таких задач юзать classnames либу
    – Austral1a
    22 мая 2021 в 11:51
  • Добавление класса соседу было дано как самый примитивный пример.... Есть ли в React возможность без проброса состояния от родителя потомкам работать с нодами соседей ? 22 мая 2021 в 11:54
  • С помощью рефоф, по другому нiкак.
    – Austral1a
    22 мая 2021 в 12:00
  • 1
    Добавил еще пример с рефами
    – Austral1a
    22 мая 2021 в 12:06
2

Для таких задач используется библиотека 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;

1

В Реакте у вас есть такая штука, как состояние(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

1
  • 1
    Только если activeClassItem === false в className будет false вместо itemBlock_active
    – Austral1a
    22 мая 2021 в 12:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.