Question

我想显示一个特定的RSS feed，具体取决于您从下拉菜单中选择的项目。在选择项目的那一刻，它会在屏幕上显示链接，但不会更新状态。

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

Answer 1

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

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

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

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

1 个答案: