当用户单击与pdf相关的难度对应的下拉菜单选项时,我正在尝试显示pdf文件。我将它们放在数组中,作为每个难度的对象。我想显示图像,但不确定如何显示。
let beginner = [
{name: 'Music City', image: './assets/MusicCity.pdf'},
{name: 'Pacific Crest', image: './assets/PacificCrest.pdf'},
{name: 'Troopers', image: './assets/Troopers.pdf'}
];
let intermediate = [
{name: 'Blue Devils', image: './assets/BlueDevils.pdf'},
{name: 'Mandarins', image: './assets/Mandarins.pdf'},
{name: 'Star of Indiana', image: './assets/StarOfIndy.pdf'}
];
let advanced = [
{name: 'Cadets', image: './assets/Cadets.pdf'},
{name: 'Bluecoats', image: './assets/Bluecoats.pdf'},
{name: 'Santa Clara Vanguard', image: './assets/SCV.pdf'}
];
let displayMusic = (item) => {
let music = [item.name, item.image].join(' ');
return music;
}
const checkSkill = (skill) => {
// console.log(skill);
if (skill === 'beginner') {
return(beginner.map(displayMusic))
} else if (skill === 'intermediate') {
return(intermediate)
} else if (skill === 'advanced') {
return(advanced)
} else {
return(null)
}
};
JSX
<DropdownMenu>
<DropdownItem header>Selet a skill level</DropdownItem>
<DropdownItem onClick={(e) => checkSkill(e.target.value)} value="beginner">Beginner</DropdownItem>
<DropdownItem onClick={(e) => checkSkill(e.target.value)} value="intermediate">Intermediate</DropdownItem>
<DropdownItem onclick={(e) => checkSkill(e.target.value)} value="advanced">Advanced</DropdownItem>
</DropdownMenu>