qq_46019299
2021-06-02 22:51
采纳率: 100%
浏览 1.2k
已采纳

react中如何获取select选中的值

这是我下拉选择框的代码

<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)
 }

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

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

 

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

5条回答 默认 最新

相关推荐 更多相似问题