React - 获取所选元素的值

Question

我有一组国家,每个国家都有一组城市.

我想打印一个用户选择国家/地区的下拉列表,然后在所选国家/地区中我想要显示另一个下拉列表中的所有城市.

但是,我怎么知道选择了哪个国家？

 handleSelect: function(indexOfSelectedCountry){

    },

    render: function(){

        var countryNames = this.props.countries.map(function(elem){
            return <option><a href="#">{elem.name}</a></option>
        });

        return(
            <div>
                <p>Select category</p>
                <div class="dropdown">
                    <select class="form-control" onselect={this.handleSelect(What do I put here?)}>
                        {countryNames}
                    </select>
                </div>
            </div>
        )
    }

我想做类似上面的事情,但我不知道如何将选择的结果传递给监听方法.

Answer 1

您不必在括号中放置任何内容,这是您检索所选值的方法(注意onChange和事件使用情况)

handleSelect: function(event) {
   var optionValue = event.target.value
   ...
},
render: function(){

    var countryNames = this.props.countries.map(function(elem){
        return <option><a href="#">{elem.name}</a></option>
    });

    return(
        <div>
            <p>Select category</p>
            <div class="dropdown">
                <select class="form-control" onChange={this.handleSelect}>
                    {countryNames}
                </select>
            </div>
        </div>
    )

请参阅https://facebook.github.io/react/docs/forms.html