javascript - 如何从<select>标记中的<option>获取所需的值

渲染（）{ 返回（

this.forwardValues（事件）}> <选择 onChange = {（事件，索引）=> this.onChangeHandler（事件，索引）} className ='选择'> {_.map（this.state.globalDataArray，（item，index）=> { 返回 {item.name} }）}

<div class="answer-list">
      <h4>2 个答案:</h4>
      
      <div class="hr-line-dashed"></div>
      <p>答案 0 :(得分：0)</p>
      <div class="answer markdown-body">
        <p>如果您使用的是React（或其他任何JavaScript框架），那么您实际上应该使用由其他开发人员创建的现成的NPM软件包来为您完成</p>

<p>例如，有<a href="https://www.npmjs.com/package/react-select-v1" rel="nofollow noreferrer">react-select</a>或<a href="https://github.hubspot.com/react-select-plus/" rel="nofollow noreferrer">React Select Plus</a>；还有很多其他的。在上述每个程序包中，您将找到如何生成带有选项列表的select以及它们如何解决处理对选定值所做的更改的问题。</p>

<p>简而言之，除非绝对必要，否则不要重新发明轮子。</p>

<p>此外，这些软件包鼓励您分别渲染（和处理）表单的每个元素，从而更易于理解。</p>
      </div>
      
      <div class="hr-line-dashed"></div>
      <p>答案 1 :(得分：0)</p>
      <div class="answer markdown-body">
        <p>可以用<code>e.options[e.selectedIndex].value</code>找到一个选定的选项。在react component方法中，您需要改为使用<code>e.target</code>。</p>

<p>这是一个例子。类似于您的代码，<code>handleChange</code> <code>select</code>事件被触发时将调用<code>onChange</code>。</p>

<p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ true”>
<div class =“ snippet-code”>
<pre class="snippet-code-js lang-js prettyprint-override"><code>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')
);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre>
</div>
</div>
<p> </p>
      </div>
      
    </div>

</div>

<div class="right">
    <div style="height:400px">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-6263610230477973"
             data-ad-slot="2820756182"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

<div class="releated-question-wrapper">
      <div class="header">
        相关问题
      </div>
      <div class="hr-line-dashed"></div>
      <ul>
        
        <li>
          <a href="/q/8054414">从php中的select / option标签中提取值？</a>
        </li>
        
        <li>
          <a href="/q/19558690">如何使用jquery从select标签中选择选项值</a>
        </li>
        
        <li>
          <a href="/q/25789613">如何从期权选择中获取价值？</a>
        </li>
        
        <li>
          <a href="/q/27191694">如何获取选择选项标签的第二个值</a>
        </li>
        
        <li>
          <a href="/q/31201853">获取选择标记值而不是选项值jQuery</a>
        </li>
        
        <li>
          <a href="/q/32132119">从select tag选项值中删除标记</a>
        </li>
        
        <li>
          <a href="/q/36484366">如何使用php从html select标签获取选项的值</a>
        </li>
        
        <li>
          <a href="/q/43146295">从jQuery中的select标签中获取选项值</a>
        </li>
        
        <li>
          <a href="/q/46197935">如何从数据库中获取select-option标签的值</a>
        </li>
        
        <li>
          <a href="/q/53781417">如何从<select>标记中的<option>获取所需的值</a>
        </li>
        
      </ul>
    </div>

<div class="releated-question-wrapper">
      <div class="header">
        最新问题
      </div>
      <div class="hr-line-dashed"></div>
      <ul>
        
        <li>
          <a href="/q/68614764">我写了这段代码，但我无法理解我的错误</a>
        </li>
        
        <li>
          <a href="/q/68614678">我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？</a>
        </li>
        
        <li>
          <a href="/q/68614175">是否有可能使 loadstring 不可能等于打印？卢阿</a>
        </li>
        
        <li>
          <a href="/q/68614313">java中的random.expovariate()</a>
        </li>
        
        <li>
          <a href="/q/68614125">Appscript 通过会议在 Google 日历中发送电子邮件和创建活动</a>
        </li>
        
        <li>
          <a href="/q/68615109">为什么我的 Onclick 箭头功能在 React 中不起作用？</a>
        </li>
        
        <li>
          <a href="/q/68615123">在此代码中是否有使用“this”的替代方法？</a>
        </li>
        
        <li>
          <a href="/q/68614097">在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化</a>
        </li>
        
        <li>
          <a href="/q/68614427">每千个数字得到</a>
        </li>
        
        <li>
          <a href="/q/68615239">更新了城市边界 KML 文件的来源？</a>
        </li>
        
      </ul>
    </div>
    <div class="">
    </div>
  </div>
</div>

<div>
      <script>
        var host = window.location.host;
if (host =="www.thinbug.com"){
  (function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
}
      </script>

</body>
</html>