在 React 中单击时显示元素的名称或表情符号，未定义

Question

这是我的组件：

const Card = ({ _name, emoji, logger }) => {
return (
<div style={styles.wrapper}>
<button onClick={logger}>-</button>
<h4>
{_name} {emoji}
</h4>
</div>
);
};

这是我的App.js:

const arr = [
{ _name: 'Apple', emoji: '🍎', id: '01' },
{ _name: 'Banana', emoji: '🍌', id: '02' },
{ _name: 'Peach', emoji: '🍑', id: '03' },
{ _name: 'Pineapple', emoji: '🍍', id: '04' },
{ _name: 'Mango', emoji: '🥭', id: '05' },
{ _name: 'Melon', emoji: '🍉', id: '06' },
];
const App = () => {
const logger = (el) => {
alert(el.target.value.emoji);
};
return (
<div style={styles.wrapper}>
{arr.map((item) => {
return (
<Card
_name={item._name}
emoji={item.emoji}
key={item.id}
logger={logger}
/>
);
})}
</div>
);
};

当你点击表情符号元素时，我试图显示它。当我点击每个项目时，我得到了undefined。为什么？问题出在哪里？

Answer 1

传递给单击处理程序的参数没有target.value.emoji，这就是为什么要获得undefined。

做你想做的事情的一种方法是将logger更改为：

const logger = (emoji) => {
alert(emoji);
};

和Card组件到：

const Card = ({ _name, emoji, logger }) => {
return (
<div style={styles.wrapper}>
<button onClick={e => logger(emoji)}>-</button>
<h4>
{_name} {emoji}
</h4>
</div>
);
};