如何从下拉菜单中显示选定的元素答案

【问题标题】：How to display a selected element from dropdown menu如何从下拉菜单中显示选定的元素
【发布时间】：2019-06-11 12:33:38
【问题描述】：

我想根据您从下拉菜单中选择的项目显示某个 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

【问题讨论】：

标签： reactjs

【解决方案1】：

对于<select>，您应该为onChange 而不是onClick注册一个监听器

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

<select className="form-control" onChange={this.handleChange}>

【讨论】：