js，JavaScript通过单击数组中的父元素来获取Img

我正在尝试制作一个select组件作为导航

当我单击其中一个菜单列表时，clickedValue（img和text）应该位于按钮元素上

我找到了一种显示点击文本值的方法，即“e.currentTarget.textContent”，但对于img，我找不到一种方法

我尝试了innerHTML，它显示的是字面上的链接源代码，但不是实际的图像

我没有写一些你不需要的其他代码，如果这让你感到困扰，对不起xD

state = {
   clickedValue : 'cryptocurrency'
}


handleSelected = (e) => {
    const { clickedValue } = this.state;

    this.setState({
        clickedValue : e.currentTarget.textContent
    })
}

const menu = [{
        link : '/service',
        img : some link,
        title : 'Cryptocurrency'
    },{
        link : '/service/wallet',
        img : some link2,
        title : 'Wallet'
    }, {
        link : '/service/ico',
        img : some link3,
        title : 'Ico'
    }]

<button>Clicked Value which is img and text here</button>
{menu.map(
    (menu) => (
         <li onClick={handleSelected} className={cx('list')}><NavLink exact to={menu.link}><img src={menu.img} alt={menu.title}/>{menu.title}</NavLink></li>
    )
)}

状态={
clickedValue:“加密货币”
}
handleSelected=（e）=>{
const{clickedValue}=this.state；
这是我的国家({
clickedValue:e.currentTarget.textContent
})
}
常量菜单=[{
链接：'/service'，
img：一些链接，
标题：“加密货币”
},{
链接：“/service/wallet”，
img：一些链接2，
标题：“钱包”
}, {
链接：'/service/ico'，
img：一些链接3，
标题：“Ico”
}]
单击值，即此处的img和文本
{menu.map(
（菜单）=>(
{menu.title}
)
)}

我相信您可以按照预期的方式运行，但为什么不简单地将菜单值传递给

handleSelected

this.handleSelected（菜单）}

---

为您节省了大量时间：）

还有一个旁注：最佳做法是不要重用映射变量名，这会导致混淆：例如

menu.map（menu=>{}）

menu.map（menuItem=>{}）

嘿，汤姆！谢谢你的提示！我之所以映射这些属性，是因为有一些相同的属性，

中的元素不想反复写入这些属性。关于映射变量名，你说得太对了！非常感谢。回到主题，当我编写

this.handleSelected（menu）}

时，如何从单击的

中获取img？onClick您的

handleSelected（）

函数将接收菜单项对象：{link:'/service'，img:some link，title:'Cryptocurrency'}因此，您可以轻松地使用它，只需更新您的函数即可执行

例如img

或其他操作