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);
}
}
}
}
'_cardSummary'の種類は何ですか? – Saravana
_cardSummaryはHTMLDivElementです – mdarmanin
'scrollTop()'はjQueryメソッドです。 DOM要素では、スクロール位置を返すだけのプロパティです。 jQueryまたは 'window.scrollTo'を使用しましたか? – Saravana