onClick - 我怎样才能获得最接近的元素[重复]答案

【问题标题】：onClick - how can i get closest element [duplicate]onClick - 我怎样才能获得最接近的元素[重复]
【发布时间】：2021-10-07 19:15:50
【问题描述】：

我的下一个 js 应用程序有问题。我正在尝试通过单击按钮在元素上添加一个类。问题是当我尝试通过下面的代码访问下一个 div 时

console.log(e.target.closest('.request_quote').querySelector('hiddenSection'));

我收到此错误：

“EventTarget”类型上不存在“最近”属性

import React from 'react';
import styles from './styles.module.scss';

/**
 * @function MyComponent
 * @access Public
 * @description Component
 */
export function MyComponent() {

    const handleClickBudget = (e: React.MouseEvent) => {
        console.log(e.target.closest('.request_quote').querySelector('hiddenSection'));
    }

    return (
        <div>
            <section className={`${styles.request_quote} limit-container`}>
                <button className="f-size-20" onClick={handleClickBudget}><b>CLICK HERE</b></button>
                <div className={styles.hiddenSection}></div>
            </section>
        </div>
    );
}

我该怎么办？

【问题讨论】：

这能回答你的问题吗？ Specifying onClick event type with Typescript and React.Konva -- 基本上，将e 的类型更改为React.MouseEvent<HTMLButtonElement>。然后：(e.target as HTMLButtonElement).closest<HTMLElement>(`.${styles.request_quote}`)!.querySelector<HTMLDivElement>(`.${styles.hiddenSection}`)

标签： typescript next.js

【解决方案1】：

function getParentByCss<T extends HTMLElement>(e: HTMLElement, className: string) {

    const hasClass = (e) => e.classList.contains(className);

    const f = (e) => {
        if(!e) return null;
        if (hasClass(e)) return e as T;
        return f(e.parentElement);
    }

    return f(e);
}

【讨论】：

它没有找到 hasClass... 属性 'hasClass' 在类型 'HTMLElement' 上不存在