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

Question

我正在使用反应,我想得到选择的下拉选项的价值反应,但我不知道如何.有什么建议？谢谢!我的下拉菜单只是一个选择:

            <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事件.在这种情况下,您可以使用defaultValueprop来设置初始值.

   <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 并且还展示了如何使用多个选择.

UPDATE

选项1的变体(使用受控组件)是使用Redux和React-Redux来创建容器组件.这涉及到connect一个mapStateToProps功能,这比听起来更容易,但如果你刚刚开始可能有点过分.

Answer 2

它应该是这样的：

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

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

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

Answer 5

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

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