0

プロジェクトでステンシル フレームワークを使用してコンポーネントを作成しています。プロジェクト構造はツリーベースであり、サブコンパクトにもサブコンポーネントがあることを意味します。私は多くの場所でカスタム イベントを使用してきました。

私の懸念は、 parameter でイベントをリッスンするとtarget:body、同じコンポーネントを 1 つのページで 2 回使用したため、コードが 2 回実行されることです。問題/懸念を示すサンプル コンポーネントを作成しました。

メイン コンポーネントのコード スニペット

import { Event, EventEmitter, Component, Prop, h } from '@stencil/core';
@Component({
   tag: 'my-component'
})
export class MyComponent {
  @Prop() first: string;
  @Prop() middle: string;
  @Prop() last: string;
  @Event() nameClick: EventEmitter;

handleClickEvent(e): void {
 this.nameClick.emit({ name: `${this.first} ${this.middle} ${this.last}` });
}

render() {
   return (
     <div>
       <div onClick={(e) => this.handleClickEvent(e)}><u>Click here to show you name!!</u></div>
       <p><div>Your full name</div><sub-component></sub-component></p>
     </div>
   )
 }
}

サブコンポーネント スニペット

import { Component, h, Listen, State } from '@stencil/core';
@Component({
  tag: 'sub-component'
})
export class SubComponent {

@State() fullName: string;

@Listen('nameClick', { target: 'body' })
onNameClick(event: CustomEvent) {
    this.fullName = event.detail.name;
}
render() {
    return <input type="text" value={this.fullName}></input>
 }
}

コンポーネントが使用されている HTML ページ

<div id="content" class="tabcontent">
 <div style="width:50%;float:left">
  <p>Component 1</p>
  <my-component first="Stencil" middle="web" last="component"></my-component>
 </div>
 <div style="width:50%;float:right">
  <p>Component 2</p>
  <my-component first="Stencil" middle="web" last="component"></my-component>
 </div>
</div>

このコードは、イベントを 2 回リッスンする原因のよう @Listen('nameClick', { target: 'body' })です。

デモ用GIF

事前に助けてくれてありがとう!!

4

1 に答える 1

0

この種の使用target: bodyは、クリックごとにトリガーされる body からのボタンのクリックをリッスンするのとよく似ています。これは、問題にアプローチする正しい方法ではありません。

テンプレートの一部であるため、親はmy-componentすでにどれがどれであるかを知っているため、@Propsub-componentを作成すると直接更新できます。fullName

例 (部分的なコード):

export class SubComponent {

  @Prop() fullName: string;

  render() {
    return <input type="text" value={this.fullName}></input>
  }
}

export class MyComponent {
  ...
  private _childComponent: HTMLSubComponentElement;

  handleClickEvent(e): void {
    this._childComponent.fullName = `${this.first} ${this.middle} ${this.last}`;
  }

  render() {
    return (
      <div>
        <div onClick={(e) => this.handleClickEvent(e)}><u>Click here to show you name!!</u></div>
        <p>
          <div>Your full name</div>
          <sub-component ref={el => this._childComponent = el}></sub-component>
        </p>
      </div>
    );
  }
}

@Prop を使用したくない場合は、@Method を定義してfullName値を設定することもできます。

于 2021-04-30T17:08:18.327 に答える