preactjs, дважды включенный переключатель - PullRequest
Новая
       7

preactjs, дважды включенный переключатель

0 голосов
/ 23 октября 2018

Я столкнулся со странным поведением с preactjs, странным, потому что со мной никогда не случалось такое с реакцией.Посмотрите на эту скрипку:

http://jsfiddle.net/8s4vhknt/

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

Первоначально пропеллер активного состояния имеет значение false -> НЕАКТИВНО.Когда вы в первый раз щелкаете знак вопроса, как и ожидалось, вызывается функция переключения, целью которой является кнопка ( Примечание: в моем локальном окружении цель события оказывается вместо этого элементом «.help-overlay» (который долженрендерится только после изменения состояния), есть идеи? )

Тогда состояние активного пропелла устанавливается в true, компонент снова рендерится -> ACTIVE в консоли, и кнопка меняется.

Теперь нажатие на кнопку вызовет событие onclick дважды, и, очевидно, ничего не изменится.

Я знаю, что этот материал каким-то образом связан с распространением события, и фактически, добавляяe.stopPropagation () в начале функции переключения выполняет работу .

Но я не понимаю, почему!Я имею в виду, что событие должно распространяться вверх через дом, почему, черт возьми, снова должен запускать один и тот же обработчик onclick для одного и того же элемента?

Вот почему я не прошу решения, но объяснениячто происходит, я не могу понять.

Большое спасибо.

Я опубликую здесь код компонента рекламы в скрипте.

const { h, render, Component } = preact;    // normally this would be an import statement.

class Help extends Component {
  constructor () {
    super()
    this.state = {active: false}
    this.toggle = this.toggle.bind(this)
  }

  toggle (e) {
    console.log('ONCLICK', new Date().getTime(), e.target)
    this.setState(state => ({active: !state.active}))
  }

  render () {
    if (!this.state.active) {
      console.log('NOT ACTIVE')
      return (
        <div class='help-btn' onClick={this.toggle}>?</div>
      )
    } else {
      console.log('ACTIVE')
      return (
        <div class='help-overlay'>
          <div class='help-btn' onClick={this.toggle}>✕</div>
        </div>
      )
    }
  }
}

// render an instance of Clock into <body>:
render(<Help />, document.body);

1 Ответ

0 голосов
/ 23 октября 2018

div с оверлейным классом в одном домене, а не в другом - создает различие vdom, которое запускает триггер для повторного рендеринга.У меня есть обернуть оба div с родительским div содержит класс условного оверлея, и он работает как ожидалось. 

.help-btn {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.help-overlay {
  background: rgba(0, 0, 0, .7);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}

/** @jsx h */
const { h, render, Component } = preact;    // normally this would be an import statement.

class Help extends Component {
  constructor () {
    super()
    this.state = {active: false};
  }

  toggle (e,isActive) {
    console.log('ONCLICK', new Date().getTime(), e.target)
    this.setState({active:!isActive});
  }

  render (props,{active}) {
        return (
        <div class={active ? "help-overlay" : "" }>
        {!active && <div class='help-btn' onClick={e => this.toggle(e,false)}>?</div>}
        {active && <div class='help-btn' onClick={e => this.toggle(e,true)}>✕</div>}
        </div>
      )
  }
}

// render an instance of Clock into <body>:
render(<Help />, document.body);

jsfiddle - http://jsfiddle.net/nhkz4feq/

...