Как отобразить выбранный элемент из выпадающего меню

Я хотел бы отображать определенный RSS-канал в зависимости от того, какой элемент вы выбираете в раскрывающемся меню. В тот момент, когда я выбираю элемент, он отображает ссылку на экране, но не обновляет состояние.

import React, { Component } from 'react'

class FacebookRSSDropdown extends Component {

    state = {
        links: [{id: 1, name: "Lost and Found Pets Northern Ireland" , content: "https://www.facebook.com/PetsLostandFoundNorthernIreland/"},
               {id: 2, name: "USPCA", content: "https://www.facebook.com/UlsterSPCA/"},
               {id: 3, name: "Pawboost Northern Ireland", content: "https://www.facebook.com/Northern-Ireland-Lost-Dogs-Cats-Pets-147512902479398/"},
               {id: 4, name: "Assisi Animal Sanctuary", content: "https://www.facebook.com/AssisiAnimalSanctuary/"},
               {id: 5, name: "Pets Reunited Newry and Mourne", content: "https://www.facebook.com/PetsReunitedNewryAndMourne/"}
            ],

        linkClicked: [{
            content: ''
        }]


    }
    handleChangeEvent = (e) => {
        console.info(e.target.value);
        this.setState({
            linkClicked: e.target.value
        })
        }



    render() {

    return (
        <div className = "container-fluid">

        <h1> Facebook RSS Feeds </h1>

            <select className = "form-control" onClick = {this.handleChangeEvent}>
            {this.state.links && this.state.links.map(link => {
                             return (
                                 <option value = {link.content}>{link.name}</option>
                             )  
                            })}
            </select>




        <div id = "rssfeeds" className = "row">


            <div className = "col">

            <div className = "fb-page" 
                data-tabs = "timeline,events,messages"
                data-href = {this.state.linkClicked.content}
                data-width = "500"
                data-height = "850"
                data-hide-cover = "false">
            </div>

            </div>

        </div>

        </div>

        )
    }
}

export default FacebookRSSDropdown
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для <select> вы должны зарегистрировать слушателя для onChange, а не onClick

handleChangeEvent = ev => {
     this.setState({
        linkClicked: ev.target.value
    })  
}
<select className = "form-control" onChange = {this.handleChangeEvent}>

Другие вопросы по теме