React stopPropagation не работает для родительских обработчиков событий - PullRequest
Новая
       41

React stopPropagation не работает для родительских обработчиков событий

0 голосов
/ 31 мая 2019

Я пробовал решения, представленные в Интернете, но не повезло.Вот ссылка codepen .Вот как выглядит код: 

//JSX:
    <div className="drawer-component" onClick={this.closeDrawer}>
      <div className="drawer-opener">
        <button onClick={this.toggleDrawer}>Toggle</button>
      </div>
      {this.state.isOpen && <div class="drawer">Hello I am a drawer. Cliking on me should not close myself.</div>}
    </div>


// Event Handlers:

toggleDrawer(e) {
  e.stopPropagation();
  this.setState((state, props) => {
      return {isOpen: !state.isOpen};
  })
}

closeDrawer(e) {
  e.stopPropagation();
  this.setState((state, props) => {
      return {isOpen: false};
  })
}

Не знаю, что я делаю неправильно, любая помощь будет оценена.

1 Ответ

1 голос
/ 31 мая 2019

Поведение соответствует написанному коду. У вас есть текст в div (class = 'box') без какого-либо обработчика щелчков, поэтому выполняется обработчик щелчка родительского элемента (div class = 'box-component'), и в этом случае он устанавливает переменную состояния isOpen ложь и закрытие ящика. E.stopPropagation () в этом ничего не влияет, так как у этого div нет дополнительных родительских элементов с обработчиком щелчка, которому может быть передано событие.

Если вы хотели, чтобы ваш текст был кликабельным, не закрывая ящик, добавьте обработчик кликов для div (с class = 'pocket'), который просто предотвращает распространение. 

    closeDrawer(e) {
      // e.stopPropagation();  This isn't required as there's nowhere further the event can get propagated
      this.setState((state, props) => {
          return {isOpen: false};
      })
    }

   // Prevent click handler of parent being called and closing the drawer
   preventClosingOnTextClick(e) {
      e.stopPropagation();
    }

    render() {
      return (
        <div className="drawer-component" onClick={this.closeDrawer}>
          <div className="drawer-opener">
            <button onClick={this.toggleDrawer}>Toggle</button>
          </div>
          {
           this.state.isOpen && 
             <div class="drawer" 
              onClick={this.preventClosingOnTextClick}> // This prevents the closing
                 Hello I am a drawer. Cliking on me should not close myself.
             </div>
          }
        </div>
      );
    }
  };

);
...