Javascript event.target在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;

控制台有时会给出以下结果之一：

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

数学

或者

数学

---

我总是需要li元素而不是div，解决方案是什么？

现在我的解决方案是：

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;
};

---

我想您需要，它总是指侦听器附加到的元素。

这是由于事件冒泡，特别是与React无关。有没有使用JavaScript的解决方案？

onClick

在child和

event.stopPropagation（）中。还要记住，React中的事件是合成的，这意味着您不应该传递对它们的引用
console.log（event.target）
正在将
event.target
引用传递给异步函数（
console.log
），因此控制台中记录的内容可能与调用
console.log
时的值不同。我的主要目标是在单击li时捕获父ul元素。当我确定event.target返回的内容时，将很容易捕获ul元素。
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);

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