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

现在我的解决方案是：

factory.newRelationship(String ns, String type, String id)

findParentWithClass是我的辅助函数：

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

Javascript event.target在ReactJs组件中未按预期输出

2 个答案: