Не работает onClick по одной кнопке из двух кнопок в функциональном компоненте React!

Рейтинг: 0Ответов: 1Опубликовано: 16.08.2023

Есть простой лендинг на React, есть слайдер из двух изображений который переключается двумя кнопками со стрелками, лево и право( изображения всего два ) то есть при рендере одна кнопка должна быть disabled.

При нажатии по кнопке которая разблочена все отрабатывает слайд листается вторая кнопка стает не disabled первая в свою очередь блокируется все отлично. Только по нажатию на вторую разблокированную кнопку нечего не происходит функция вообще не отрабатывает, при том в Event Listners в браузере( консоли разраба) слушатель висит, на элементе тоже нету disabled короче по сss и html все корректно а вот функция обработчик полностью игнорируется как будто ее и нету там.

При том есть изначально убрать disabled с разметки то обе кнопки будут работать и переключать как все и задумано, но только в любом случае отрисовывать страницу нужно с одной заблоченной кнопкой.

const Main = () => {
  const [index, setIndex] = useState('01');
  const first = useRef();
  const second = useRef();
  // const buttonRight = useRef();
  // const buttonLeft = useRef();

  const toggleImage = (e, i) => {
    i !== '01' ? setIndex('02') : setIndex('01');
    e.target.setAttribute('disabled', true);
    document
      .querySelector('.hero__arrow-button[disabled]')
      .removeAttribute('disabled');
    first.current.classList.toggle('translate');
    second.current.classList.toggle('translate');
  };



  return (
        <div className="hero__titel-wrapper">
          <h1 className="hero__title">
            PROJECT <span className="hero__title--view">HOME</span>
          </h1>
          <div className="hero__arrow-wrapper">
            <button
              type="button"
              disabled
              className="hero__arrow-button"
              onClick={e => toggleImage(e, '01')}
            >
              <ArrowLeft />
            </button>
            <button
              type="button"
              className="hero__arrow-button"
              onClick={e => toggleImage(e, '02')}
            >
              <ArrowRight />
            </button>
          </div>
          <div className="hero__counter-wrapper">
            <p style={{ width: '30px' }} className="hero__counter">
              {index}
            </p>
            <Line />
            <p className="hero__counter">02</p>
          </div>
        </div>
        <div className="hero__img-wrapper">
          <img ref={first} className="hero__img" src={heroImg} alt="Build" />
          <img
            ref={second}
            className="hero__img"
            src={heroImgSecond}
            alt="Build"
          />
        </div>
reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

В реакте все должно строиться от состояния. Так же необходимо избегать селекторов вида document.get* и его аналогов.

Ниже пример кода для определения активной кнопки исходя из состояния компонента.

const Buttons = () => {
  const [index, setIndex] = useState('01');

  const toggleImage = (e, i) => {
    setIndex(i)
  };

  return (
    <div className="hero__titel-wrapper">
      <h1 className="hero__title">
        PROJECT <span className="hero__title--view">HOME</span>
      </h1>
      <div className="hero__arrow-wrapper">
        <button
          type="button"
          disabled={index === '01'}
          className="hero__arrow-button"
          onClick={e => toggleImage(e, '01')}
        >
          Лево
        </button>
        <button
          type="button"
          disabled={index === '02'}
          className="hero__arrow-button"
          onClick={e => toggleImage(e, '02')}
        >
          Право
        </button>
      </div>
      <div className="hero__counter-wrapper">
        <p style={{ width: '30px' }} className="hero__counter">
          {index}
        </p>
        
        <p className="hero__counter">02</p>
      </div>
    </div>
    )
  }