如何从 <select> 标签中的 <option> 获取所需的值答案

【问题标题】：How to get needed value from <option> in <select> tag如何从 <select> 标签中的 <option> 获取所需的值
【发布时间】：2018-12-14 14:16:07
【问题描述】：

render () {
    return (
      <form onSubmit={(event) => this.forwardValues(event)}>
        <select
          onChange={(event, index) => this.onChangeHandler(event, index)} 
          className='select'> 
          {_.map(this.state.globalDataArray, (item, index) => {
            return <option key={index} value={item}>{item.name}</option>
          })}
        </select>
        <textarea defaultValue='Enter your notations...' />
        <button type='submit'>Save</button>
      </form>
    )
  }
}

【问题讨论】：

您好，欢迎来到 StackOverflow。请阅读How to ask

标签： javascript reactjs select option

【解决方案1】：

如果您正在使用 React（或任何其他 JavaScript 框架），您应该真正使用其他开发人员创建的现成可用的 NPM 包来为您执行此操作

比如有react-select或者React Select Plus；还有其他一些。在这些软件包中的每一个中，您都会发现如何使用选项列表生成 select，以及它们如何解决处理对选定值的更改的问题。

简而言之，除非万不得已，否则不要重新发明轮子。

此外，这些包鼓励您分别呈现（和处理）表单的每个元素，使其更易于理解。

【讨论】：

"...你真的应该使用..."：这是一个见仁见智的问题。如果这是一项简单的任务，我宁愿编写自己的代码，也不愿依赖可能从 npm 中消失、停止或停止支持的包。编写自己的代码还可以让您更好地理解所涉及的概念。
您的目标是及时生成应用程序，而不是花时间做很多其他人一直在做的事情。如果您非常担心软件包会消失，那么没有什么可以阻止您创建存储库的本地克隆。您还说这是一项简单的任务，但您可以打赌，带有选项的 select 会在应用程序中多次出现，如果/当您需要更改时，标准化会使生活变得更简单。
没有。这是你的目标。告诉其他人他们应该在不正确的情况下做某事并不是一个好的答案。为避免这种情况，您可以编写诸如“您可能希望利用这些现成的模块”之类的内容。我不反对这些 3rd 方模块不是好东西——这只是措辞问题。跨度>
当然是真的。他们的目标是处理选定项目中的选项更改。第三方库正是这样做的；事实上，我链接到的第一个包在文档页面上给出了一个如何做到这一点的例子。措辞没有争议。如果有一个库可以胜任完成你想要的任务，那么你不应该浪费时间自己去做。您或许应该花时间了解包如何实现解决方案；我们可以达成一致:)
如果您查看我的答案，则 OP 正在寻找的代码是一行。仅仅为此使用 3rd-party 模块太疯狂了。

【解决方案2】：

可以使用e.options[e.selectedIndex].value 找到选定的选项。在 react 组件方法中，您需要改用 e.target。

这是一个例子。类似于您的代码handleChange 在触发select onChange 事件时被调用。

class Select extends React.Component {
  
  handleChange(e) {

    // Grab the value from the selected index (option)
    const { value } = e.target.options[e.target.selectedIndex];
    console.log(value);
  }
  
  render() {
    const { options } = this.props;
    return (
      <select onChange={this.handleChange}>
        {options.map((option, i) => {
          return <option key={i} value={option}>{option}</option>
        })}   
      </select>
    )
  }
}

const options = [
  'drink', 'eat', 'dance', 'drive'
];

ReactDOM.render(
  <Select options={options} />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

【讨论】：