Thinbug
News
如何从<select>标记中的<option>获取所需的值
时间:2018-12-14 14:16:07
标签:
javascript
reactjs
select
option
渲染(){ 返回(
this.forwardValues(事件)}> <选择 onChange = {(事件,索引)=> this.onChangeHandler(事件,索引)} className ='选择'> {_.map(this.state.globalDataArray,(item,index)=> { 返回
{item.name} })}
<button type ='提交'>保存</button> </form> ) } } </div> <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 style="height:20px"></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>