按钮 onClick 触发两次

Question

  @State() open: boolean = false;

...
...
  private toggleSelect(source: string) {
    console.log('fired ' + source);
    this.open = !this.open;
    console.log('toggleSelect: Open is now ' + this.open);
    this.toggle.emit({ visible: this.open });
  }

  private handleSelect(value: string | undefined) {
    this.value = value;
    console.log('EMITTING ' + this.value);
    this.changeValue.emit(this.value);
  }

  render() {
    return (
      <Host>
        <button
          class={`select ${this.open ? 'icon-open' : 'icon-closed'} ${
            this.open ? 'select-open' : 'select-closed'
          }`}
          onClick={() => this.toggleSelect('button')}
        >
          <a> {this.getClosedDisplayValue(this.value)} </a>
          <div class={`select-panel ${this.open ? 'open' : 'close'}`}>
            {[{ value: 'undefined', name: '' }, ...this.data].map((item) => {
              {
                return (
                  <label class="checkmark" htmlFor={item.value}>
                    {this.getDisplayValue(item.value)}
                    <input
                      id={item.value}
                      title={this.getDisplayValue(item.value)}
                      name="select"
                      type="radio"
                      value={item.value}
                      onInput={(event) =>
                        this.handleSelect((event.target as HTMLInputElement).value)
                      }
                    />
                  </label>
                );
              }
            })}
          </div>
        </button>
        <div
          class={`overlay ${this.open ? 'open' : 'close'}`}
          role="button"
          onClick={() => this.toggleSelect('overlay')}
        ></div>
      </Host>
    );
  }
}

我有以下代码，当我打开下拉菜单和 select 一个项目时会发生什么 - 我在日志中得到了这个

*/opening the drop down
select.entry.js:39 fired button
select.entry.js:39 toggleSelect: Open is now true

*/selecting an option notice the double click event
select.entry.js:37 fired button
select.entry.js:39 toggleSelect: Open is now false
select.entry.js:37 fired button
select.entry.js:39 toggleSelect: Open is now true
select.entry.js:44 handling select was: true now is **FALSE**

有没有办法防止它被调用两次或者是因为我在按钮标签内有一个输入单选标签

理想情况下，我不想在句柄 select 方法上硬编码 this.open =false

Answer 1

这是 React 严格模式的一个特性。 React 通过运行某些函数两次来帮助您检测副作用。 看一下： 为什么console.log在react js中记录两次？