react中如何获取select选中的值

Question

这是我下拉选择框的代码

<Select defaultValue="60%" ref={this.select} onChange={this.getValue} >
                    <Option key="1" value="60">60%</Option>
                    <Option key="2" value="70">70%</Option>
                    <Option key="3" value="80">80%</Option>
</Select>

通过getValue方法获得选中的值

尝试过的方法，在select中加一个ref,然后在方法中用下面的代码

getValue=(e)=>{
        //获取被选中的值
        console.log(this.select.current.props.children);
        
}

结果只是获取到

它获取了我下拉框所有的选项，并没有获取到选中的那一项；

我还尝试过网上的另一种方法，给select标签加类选择器

<Select defaultValue="60%" onChange={this.getValue} className="sel" >
                    <Option key="1" value="60">60%</Option>
                    <Option key="2" value="70">70%</Option>
                    <Option key="3" value="80">80%</Option>
</Select>

方法中这样获取：

getValue=(e)=>{
        
        const select = document.getElementsByClassName('sel')[0];
        const roleType = select.options[select.selectedIndex].text;
        console.log(roleType)
 }

换成这个方法之后，点击下拉框选择值之后，页面就直接报错了

找了这两种方法都没有解决我的问题，希望看到这篇问答的朋友，如果你刚好会的话，能解答一下这个问题，万分感谢！！

 

Answer 1

import React, { Component } from 'react'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      cities:["北京","上海","广州"],   //选项
      city:"广州"   // 默认选项
     }
  }
  render() { 
    return (
      <div>
        {/* value放在select里 select框也要onChcange*/}
        <select value={this.state.city} onChange={(e)=>this.getValue(e)}>
          {
            // 遍历option
            this.state.cities.map((ele,index)=>{
              return(
                <option key={index}>{ele}</option>
              )
            })
          }
        </select>
      </div>
     );
  }
  getValue=(event)=>{
    //获取被选中的值
    console.log(event.target.value);
    this.setState({
      //默认值改变
      city:event.target.value
    })

  }
}
 
export default App;

可以试试这个