2017-05-16 5 views
0

クリックしたときにcardSummary要素を上にスクロールします。これは私がこれまでに適用されてきたものである:私はこれをコンパイルしたい場合TypeScriptでscrollTopメソッドを使用するときの呼び出しシグネチャエラー

public onClickHandler(event: React.MouseEvent<any>): void { 
    if (this.props.onClick) { 
     console.log("scroll"); 
     if (this.isInViewport(this._cardSummary) === false) { 
      this._cardSummary.scrollTop(0); 
      this.props.onClick(event); 
     } 
    } 
} 

は今、私はエラーを取得する要素が出ているときに私はscrollTopスプライトメソッドを呼び出すようにしなければならない何Cannot invoke an expression whose type lacks a call signature. Type 'Number' has no compatible call signatures.

ビューポートの?ここで

は、その全体が構成要素である:

export class CardSummary extends React.Component<ICardSummaryProps, undefined> { 
    public static defaultProps = { labelColor: "transparent" }; 

    private _cardSummary: HTMLDivElement; 

    public render(): JSX.Element { 
     return <div className="card-summary" onClick={this.onClickHandler.bind(this)} ref={(el) => this._cardSummary = el } > 
      <div> 
       <div className="color" style={{ "backgroundColor": this.props.labelColor, flexShrink: 0, "float": "left" }}></div> 
       <div className="row card-rowcontainer"> 
        {this.props.children} 
       </div> 
      </div> 
     </div>; 
    } 

    public isInViewport(element: boolean) { 
     const rect = element.getBoundingClientRect(); 
     const html = document.documentElement; 
     return (
      rect.top >= 0 && 
      rect.left >= 0 && 
      rect.bottom <= (window.innerHeight || html.clientHeight) && 
      rect.right <= (window.innerWidth || html.clientWidth) 
     ); 
    } 

    public onClickHandler(event: React.MouseEvent<any>): void { 
     if (this.props.onClick) { 
      console.log("scroll"); 
      if (this.isInViewport(this._cardSummary) === false) { 
       this._cardSummary.scrollTop(0); 
       this.props.onClick(event); 
      } 
     } 
    } 
} 
+0

'_cardSummary'の種類は何ですか? – Saravana

+0

_cardSummaryはHTMLDivElementです – mdarmanin

+1

'scrollTop()'はjQueryメソッドです。 DOM要素では、スクロール位置を返すだけのプロパティです。 jQueryまたは 'window.scrollTo'を使用しましたか? – Saravana

答えて

0

あなたはtsconfig.json内側のlibにDOM種類含まれていることを確認してください:あなたのタージェは、あなたのデフォルトをES5されている場合

"target": "es5", 
"lib": [ 
    "dom", 
    "es5", 
    "scripthost" 
], 

注意をLIBSを含むべきですドン、es5とscripthostだから、あなたは十分にカバーする必要があります。

もしそうでなければ、あなたのtsconfigを共有してみてください。

関連する問題