将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;

对于前端开发人员来说，很多时候我们必须处理表单中的下拉列表，我们必须使用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 (
            <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>Selected value is : {this.state.selectValue}</div>
export default InlineStyle;

import React from 'react';
import Select from 'react-select';
const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
class App extends React.Component {
  state = {
    selectedOption: null,
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  render() {
    const { selectedOption } = this.state;
    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
}

你可以在这个 site 上查看。

您可以在相同的函数中处理所有这些操作，如下所示

​

<select className="form-control mb-3" onChange={(e) => this.setState({productPrice: e.target.value})}>
  <option value="5">5 dollars</option>
  <option value="10">10 dollars</option>
</select>

​

正如你所看到的，当用户选择一个选项时，它将设置一个状态并获得所选事件的值，而不需要进一步编码！

如果您希望从映射的select输入中获取值，则可以参考此示例：

class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          fruit: "banana",
        this.handleChange = this.handleChange.bind(this);
      handleChange(e) {
        console.log("Fruit Selected!!");
        this.setState({ fruit: e.target.value });
      render() {
        return (
          <div id="App">
            <div className="select-container">
              <select value={this.state.fruit} onChange={this.handleChange}>
                {options.map((option) => (
                  <option value={option.value}>{option.label}</option>
              </select>
    export default App;

它应该是这样的：

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

你可以在这里看到： https://codesandbox.io/s/quizzical-https-t1ovo?file=/src/App.js:0-572