如何在 ReactJS 中获取下拉菜单的选定值

Question

我正在使用 React，我想获取 React 中下拉菜单的 selected 选项的值，但我不知道如何获取。有什么建议么？谢谢！我的下拉菜单只是一个 select，例如：

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

Answer 1

render 方法中的代码表示任何给定时间的组件。如果您这样做 something like this，用户将无法使用表单控件进行选择：

<select value="Radish">
  <option value="Orange">Orange</option>
  <option value="Radish">Radish</option>
  <option value="Cherry">Cherry</option>
</select>

因此有两种使用表单控件的解决方案：

受控组件 使用组件state 来反映用户的选择。这提供了最大程度的控制，因为您对 state 所做的任何更改都将反映在组件的渲染中：

示例：

var FruitSelector = React.createClass({
    getInitialState:function(){
      return {selectValue:'Radish'};
  },
    handleChange:function(e){
    this.setState({selectValue:e.target.value});
  },
  render: function() {
    var message='You selected '+this.state.selectValue;
    return (
      <div>
      <select 
        value={this.state.selectValue} 
        onChange={this.handleChange} 
      >
       <option value="Orange">Orange</option>
        <option value="Radish">Radish</option>
        <option value="Cherry">Cherry</option>
      </select>
      <p>{message}</p>
      </div>        
    );
  }
});

React.render(<FruitSelector name="World" />, document.body);

JSFiddle：http://jsfiddle.net/xe5ypghv/

Uncontrolled Components 另一种选择是不控制值，只响应 onChange 事件。在这种情况下，您可以使用 defaultValue 属性来设置初始值。

<div>
 <select defaultValue={this.state.selectValue} 
 onChange={this.handleChange} 
 >
    <option value="Orange">Orange</option>
    <option value="Radish">Radish</option>
    <option value="Cherry">Cherry</option>
  </select>
  <p>{message}</p>
  </div>

http://jsfiddle.net/kb3gN/10396/

这方面的文档很棒：http://facebook.github.io/react/docs/forms.html 并展示如何处理多项选择。

更新

选项 1 的一个变体（使用受控组件）是使用 Redux and React-Redux to create a container component。这涉及 connect 和一个 mapStateToProps 函数，这比听起来容易，但如果您刚刚开始，可能有点过头了。

Answer 2

只需使用 <select> 对象的 onChange 事件。选择的值在 e.target.value then.

顺便说一句，使用 id="..." 是一种不好的做法。最好使用 ref=">.." http://facebook.github.io/react/docs/more-about-refs.html

Answer 3

将您的下拉菜单实现为

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

Answer 4

对于前端开发人员来说，很多时候我们都在处理我们必须处理下拉列表的表单，我们必须使用所选下拉列表的值来执行某些操作或在服务器上发送值，这非常简单您必须在 HTML 中编写简单的下拉菜单，只需在下拉菜单中放置一个用于选择的 onChange 方法每当用户更改下拉列表的值时，将该值设置为状态，以便您可以在 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;

Answer 5

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 上查看。

Answer 6

您可以在与以下相同的函数中处理所有这些

<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 一个选项时，它将设置一个状态并获取 selected 事件的值，而无需进一步编码！

Answer 7

就这么简单。您只需要使用 "value" 属性而不是 "defaultValue" 或者如果预先选择的功能是您可以同时保留这两个属性那里。

 ....
const [currentValue, setCurrentValue] = useState(2);
<select id = "dropdown" value={currentValue} defaultValue={currentValue}>
     <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>
.....

setTimeut(()=> {
 setCurrentValue(4);
}, 4000);

在这种情况下，4 秒后将使用选项 4 自动选择下拉列表。

Answer 8

我正在为语言选择器制作一个 drop-down 菜单 - 但我需要下拉菜单在页面加载时显示当前语言。我要么从 URL 参数 example.com?user_language=fr 获取我的初始语言，要么从用户的浏览器设置中检测它。然后，当用户与下拉菜单交互时，所选语言将更新，语言选择器下拉菜单将显示当前所选语言。

本着使用食物示例的其他答案的精神，我为您准备了各种水果。

首先，用一个基本的 React 功能组件回答最初提出的问题——两个有和没有 props 的例子，然后是如何将组件导入其他地方。
接下来，同样的示例 - 但使用 Typescript 进行了改进。
然后是一个额外的结局 - 使用 Typescript 的语言选择器下拉组件。

基本 React (16.13.1) 功能组件示例。 `FruitSelectDropdown` 的两个示例，一个没有道具，一个接受道具 `fruitDetector`

import React, { useState } from 'react'

export const FruitSelectDropdown = () => {
  const [currentFruit, setCurrentFruit] = useState('oranges')
  
  const changeFruit = (newFruit) => {
    setCurrentFruit(newFruit)
  }
  
  return (
    <form>
      <select 
        onChange={(event) => changeFruit(event.target.value)}
        value={currentFruit}
      >
        <option value="apples">Red Apples</option>
        <option value="oranges">Outrageous Oranges</option>
        <option value="tomatoes">Technically a Fruit Tomatoes</option>
        <option value="bananas">Bodacious Bananas</option>
      </select>
    </form>
  )
}

或者你可以让 FruitSelectDropdown 接受 props，也许你有一个输出字符串的函数，你可以使用 fruitDetector prop

传递它

import React, { useState } from 'react'

export const FruitSelectDropdown = ({ fruitDetector }) => {
  const [currentFruit, setCurrentFruit] = useState(fruitDetector)
  
  const changeFruit = (newFruit) => {
    setCurrentFruit(newFruit)
  }
  
  return (
    <form>
      <select 
        onChange={(event) => changeFruit(event.target.value)}
        value={currentFruit}
      >
        <option value="apples">Red Apples</option>
        <option value="oranges">Outrageous Oranges</option>
        <option value="tomatoes">Technically a Fruit Tomatoes</option>
        <option value="bananas">Bodacious Bananas</option>
      </select>
    </form>
  )
}

然后将 FruitSelectDropdown 导入应用的其他地方

import React from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'

const App = () => {
  return (
    <div className="page-container">
      <h1 className="header">A webpage about fruit</h1>
      <div className="section-container">
        <h2>Pick your favorite fruit</h2>
        <FruitSelectDropdown fruitDetector='bananas' />

      </div>
    </div>
  )
}

export default App

`FruitSelectDropdown` 使用 Typescript

import React, { FC, useState } from 'react'

type FruitProps = {
  fruitDetector: string;
}

export const FruitSelectDropdown: FC<FruitProps> = ({ fruitDetector }) => {
  const [currentFruit, setCurrentFruit] = useState(fruitDetector)
  
  const changeFruit = (newFruit: string): void => {
    setCurrentFruit(newFruit)
  }
  
  return (
    <form>
      <select 
        onChange={(event) => changeFruit(event.target.value)}
        value={currentFruit}
      >
        <option value="apples">Red Apples</option>
        <option value="oranges">Outrageous Oranges</option>
        <option value="tomatoes">Technically a Fruit Tomatoes</option>
        <option value="bananas">Bodacious Bananas</option>
      </select>
    </form>
  )
}

然后将 FruitSelectDropdown 导入应用的其他地方

import React, { FC } from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'

const App: FC = () => {
  return (
    <div className="page-container">
      <h1 className="header">A webpage about fruit</h1>
      <div className="section-container">
        <h2>Pick your favorite fruit</h2>
        <FruitSelectDropdown fruitDetector='bananas' />

      </div>
    </div>
  )
}

export default App

奖励回合：选择当前值的翻译下拉列表：

import React, { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'

export const LanguageSelectDropdown: FC = () => {
  const { i18n } = useTranslation()
  const i18nLanguage = i18n.language
  const [currentI18nLanguage, setCurrentI18nLanguage] = useState(i18nLanguage)
  
  const changeLanguage = (language: string): void => {
    i18n.changeLanguage(language)
    setCurrentI18nLanguage(language)
  }
  
  return (
    <form>
      <select 
        onChange={(event) => changeLanguage(event.target.value)}
        value={currentI18nLanguage}
      >
        <option value="en">English</option>
        <option value="de">Deutsch</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
      </select>
    </form>
  )
}

An invaluable resource for React/Typescript

Answer 9

使用 React 功能组件：

const [option,setOption] = useState()

function handleChange(event){
    setOption(event.target.value)
}

<select name='option' onChange={handleChange}>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Answer 10

如果你想从映射的 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>
            </div>
          </div>
        );
      }
    }
    
    export default App;

Answer 11

应该是这样的：

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

Answer 12

import {React, useState }from "react";

function DropDown() {

const [dropValue, setDropValue ]= useState();

return <>
    <div>
        <div class="dropdown">
          <button class="btn btn-secondary" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            {dropValue==null || dropValue=='' ?'Select Id':dropValue}
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" onClick={()=> setDropValue('Action')} href="#">Action</a></li>
            <li><a class="dropdown-item" onClick={()=> setDropValue('Another action')} href="#">Another action</a></li>
            <li><a class="dropdown-item" onClick={()=> setDropValue('Something else here')} href="#">Something else here</a></li>
          </ul>
        </div>
    </div>
   </>
}

export default DropDown

Answer 13

<select value ={this.state.value} onChange={this.handleDropdownChange}>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

如何在 ReactJS 中获取下拉菜单的选定值

How to get selected value of a dropdown menu in ReactJS

javascript

select

menu

drop-down-menu

reactjs

更新

基本 React (16.13.1) 功能组件示例。 `FruitSelectDropdown` 的两个示例，一个没有道具，一个接受道具 `fruitDetector`

`FruitSelectDropdown` 使用 Typescript

奖励回合：选择当前值的翻译下拉列表：

如何在 ReactJS 中获取下拉菜单的选定值

How to get selected value of a dropdown menu in ReactJS

javascript

select

menu

drop-down-menu

reactjs

更新

基本 React (16.13.1) 功能组件示例。 FruitSelectDropdown 的两个示例，一个没有道具，一个接受道具 fruitDetector

FruitSelectDropdown 使用 Typescript

奖励回合：选择当前值的翻译下拉列表：

基本 React (16.13.1) 功能组件示例。 `FruitSelectDropdown` 的两个示例，一个没有道具，一个接受道具 `fruitDetector`

`FruitSelectDropdown` 使用 Typescript