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

Question

我正在使用反应，我想在反应中获取下拉列表的选定选项的值，但我不知道如何。 有什么建议么？ 谢谢：我的下拉列表只是一个 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方法中的代码表示任何给定时间的组件。 如果你做这样的事情，用户将无法使用表单控件进行选择：

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

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

1. 受控组件使用组件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/

2. 不受控制的组件另一种选择是不控制值并简单地响应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和React-Redux创建容器组件。 这涉及connect和mapStateToProps函数，这比听起来容易，但如果您刚刚开始，可能会过大。

Answer 2

将您的下拉菜单实现为

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

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

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

Answer 4

对于前端开发人员来说，很多时候我们都在处理我们必须处理下拉列表的表单，我们必须使用所选下拉列表的值来执行某些操作或在服务器上发送值，这很简单要在 HTML 中编写简单的下拉列表，只需在下拉列表中放置一个用于选择的 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;

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

你可以在这个网站上查看。

Answer 6

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

我正在为语言选择器制作一个下拉菜单 - 但我需要下拉菜单在页面加载时显示当前语言。 我要么从 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 接受道具，也许你有一个输出字符串的函数，你可以使用fruitDetector道具传递它

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与打字稿

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

---

React/Typescript 的宝贵资源

Answer 9

您可以在以下相同的功能中处理所有这些

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

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

Answer 10

如果你想从映射的选择输入中获取值，那么你可以参考这个例子：

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>

Answer 14

正如上面 Karen 所提到的，您可以只使用触发事件中的目标值。 这是一小段代码

                 `<select class="form-select py-2" 
                  onChange={(e) => setVotersPerPage(e.target.value)}>
                  <option value="10">10</option>
                  <option value="25">25</option>
                  <option value="50">50</option>
                  </select>`