如何在ReactJS中获取下拉菜单的选定值
如何在ReactJS中获取下拉菜单的选定值
提问于 2015-03-18 04:10:53
我正在使用react，我想在react中获取下拉菜单中所选选项的值，但我不知道如何获取。有什么建议吗？谢谢!我的下拉列表只是一个像这样的选择：
<select id = "dropdown">
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>回答 8
Stack Overflow用户
发布于 2016-03-22 14:56:55
将Dropdown实现为
<select id = "dropdown" ref = {(input)=> this.menu = input}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>现在，要获取下拉菜单的选定选项值，只需使用：
let res = this.menu.value;Stack Overflow用户
发布于 2019-08-01 18:32:09
对于前端开发人员来说，很多时候我们必须处理表单中的下拉列表，我们必须使用selected dropdown的值来执行一些操作或在服务器上发送该值，这非常简单，你必须在HTML语言中编写简单的dropdown，只要用户更改dropdown的值，就可以在dropdown中选择一个onChange方法将该值设置为state，这样你就可以在AvFeaturedPlayList 1中轻松地访问它。记住，你总是会得到作为选项值的结果，而不是屏幕上显示的下拉文本
import React, { Component } from "react";
import { Server } from "net";
class InlineStyle extends Component {
constructor(props) {
super(props);
this.state = {
selectValue: ""
};
this.handleDropdownChange = this.handleDropdownChange.bind(this);
}
handleDropdownChange(e) {
this.setState({ selectValue: e.target.value });
}
render() {
return (
<div>
<div>
<div>
<select id="dropdown" onChange={this.handleDropdownChange}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>Selected value is : {this.state.selectValue}</div>
</div>
</div>
);
}
}
export default InlineStyle;Stack Overflow用户
发布于 2021-08-20 05:10:30
它应该是这样的：
import React, { useState } from "react";
export default function App() {
const getInitialState = () => {
const value = "Orange";
return value;
};
const [value, setValue] = useState(getInitialState);
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<div>
<select value={value} onChange={handleChange}>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{`You selected ${value}`}</p>
</div>
);
}你可以在这里看到：https://codesandbox.io/s/quizzical-https-t1ovo?file=/src/App.js:0-572
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29108779
复制相关文章
相似问题