Reactjs 如何从下拉菜单中显示选定元素

我想根据您从下拉菜单中选择的项目显示特定的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: ''
        }]


    }
    handleChange = (e) => {
        console.log(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.handleChange}>
            {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

import React，{Component}来自“React”
类FacebookRSSDropdown扩展组件{
状态={
链接：[{id:1，名称：“北爱尔兰失物招领宠物”，内容：https://www.facebook.com/PetsLostandFoundNorthernIreland/"},
{id:2，名称：“USPCA”，内容：https://www.facebook.com/UlsterSPCA/"},
{id:3，名称：“北爱尔兰”，内容：https://www.facebook.com/Northern-Ireland-Lost-Dogs-Cats-Pets-147512902479398/"},
{id:4，名称：“阿西西动物保护区”，内容：https://www.facebook.com/AssisiAnimalSanctuary/"},
{id:5，名称：“宠物团聚，新婚和哀悼”，内容：https://www.facebook.com/PetsReunitedNewryAndMourne/"}
],
点击链接：[{
内容：“”
}]
}
handleChange=（e）=>{
console.log（如target.value）；
这是我的国家({
linkClicked:e.target.value
})
}
render（）{
返回(
Facebook RSS源
{this.state.links&&this.state.links.map（link=>{
返回(
{link.name}
)  
})}
)
}
}
导出默认FacebookRSSDropdown

对于

您应该为

onChange

注册侦听器，而不是

onClick

handleChange = ev => {
     this.setState({
        linkClicked: ev.target.value
    })  
}

对于

您应该为

onChange

注册侦听器，而不是

onClick

handleChange = ev => {
     this.setState({
        linkClicked: ev.target.value
    })  
}