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

时间：2015-03-17 20:10:53

标签： javascript select drop-down-menu menu reactjs

我正在使用反应，我希望得到选择的下拉选项的价值，但我不知道如何。有什么建议？谢谢！ 我的下拉菜单只是一个选择：

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

10 个答案:

答案 0 :(得分：59)

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

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

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

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

    2. 示例：

    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/

    1. 不受控制的组件另一个选项是不控制值，只是响应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>

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

      这方面的文档很棒：http://facebook.github.io/react/docs/forms.html 并且还展示了如何使用多个选择。

      更新

      选项1的变体（使用受控组件）是使用Redux和React-Redux来创建container component。这涉及connect和mapStateToProps函数，这比听起来更容易，但如果你刚刚开始则可能有点过分。

答案 1 :(得分：13)

将您的下拉列表实现为

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

答案 2 :(得分：8)

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

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

答案 3 :(得分：3)

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上进行检查。

答案 4 :(得分：2)

就这么简单。您只需要使用“值” 属性而不是“ 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自动选择下拉列表。

答案 5 :(得分：1)

对于前端开发人员来说，很多时候我们都在处理必须处理下拉菜单的表单，因此我们必须 使用选定下拉列表的值执行某些操作或在服务器上发送该值，这非常简单 您必须用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;

答案 6 :(得分：1)

您可以在与以下相同的功能中处理所有问题

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

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

答案 7 :(得分：1)

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

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;

答案 8 :(得分：0)

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

根据其他通过食物示例回答的精神，我为您提供了各种各样的水果佳肴。

  • 首先，使用基本的React功能组件回答最初提出的问题-两个带有和不带有prop的示例，然后如何将该组件导入其他地方。

  • 接下来，是相同的示例-但是用Typescript弄糟了。

  • 然后结束语-使用Typescript的语言选择器下拉组件。

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

An invaluable resource for React/Typescript

答案 9 :(得分：0)

使用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>
相关问题
最新问题