Я использую выпадающий список реакции-начальной загрузки.Согласно документации , реквизит eventKey
будет передан обработчику onSelect
при выборе выпадающего элемента.
Я пытаюсь установить eventKey
для объектаи передал это моему обработчику handleSelect(e)
, но когда я console.log()
передал значение моему обработчику, он дает мне строку [object Object]
.
Мой компонент выглядит следующим образом:
const CustomDropdown = props => {
function handleSelect(e) {
console.log(e);
//I expect this to print { name: 'genre', label: 'Genres' } but
//it prints '[object Object]'
}
return (
<Dropdown>
<Dropdown.Toggle as={React.Button} variant="link" id="dropdown-basic">
{props.text}
</Dropdown.Toggle>
<Dropdown.Menu>
{props.choices.map((choice, i) => ( //choices is an array of objects
<Dropdown.Item
key={i}
eventKey={choice} //The object I'm passing in. See below
onSelect={handleSelect}>
{choice.label}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
);
};
Объект choice
выглядит следующим образом:
{
name: 'genre',
label: 'Genres',
}
Однако, если я заменю свою onSelect={handleSelect}
опору нафункция стрелки onSelect={() => handleSelect(choice)}
, объект правильно передается в handleSelect, как я хочу.Почему метод функции arrow передает объект, а оригинальный метод - нет?