Javascript event.target無法在ReactJs組件中按預期輸出

Question

考慮下面的ReactJs組件：

import React from 'react';

const TestOptions = (props) => (
    <li className={props.className} onClick={(event) => props.clickTestOptions(event)}>
        {
            React.createElement(
                'div',
                {
                    className: 'opt-wrap',
                    dangerouslySetInnerHTML: {
                        __html: props.details.answer
                    }
                }
            )
        }
    </li>
);

export default TestOptions;

在父組件中，我具有以下功能。

clickTestOptions = (event) => {
    console.log(event.target);
}

控制台有時會給我以下結果之一：

<div class="opt-wrap">Mathematics</div>

要么，

<li class="mc-opt-cls"><div class="opt-wrap">Mathematics</div></li>

我總是需要li元素而不是div，如何解決？

Answer 1

我認為您需要event.currentTarget ，它始終引用偵聽器所附加的元素。

Answer 2

現在，我的解決方案是：

let targetOpt = event.target;
console.log('targetOpt:', targetOpt);

if (!targetOpt.classList.contains("mc-opt-cls")) {
    targetOpt = findParentWithClass(event.target, 'mc-opt-cls');
}

console.log('targetOpt:', targetOpt);

findParentWithClass是我的輔助函數：

export const findParentWithClass = (el, cls)=> {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
};