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

Answer 2

试试这个：

<select class="form-control" onChange={ e => this.handleSelect(e.target.value)}>
  {countryNames}
</select>

Answer 3

尝试这样：

handleSelect: function(event){
    console.log(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" onselect={this.handleSelect}>
                    {countryNames}
                </select>
            </div>
        </div>
    )
}

React - 获取所选元素的值

3 个答案: