React.js是否支持HTML5数据列表？
React.js是否支持HTML5数据列表？
提问于 2017-07-18 21:00:36
我正在尝试以一种最简单的方式实现HTML5数据列表元素。
如下所示：
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>然而，这并不起作用。我的下一步是什么，而不必安装(npm)额外的东西。
基本上，我使用的是普通的输入 react元素，并希望嵌入datalist。
下面是我的react代码：
<input className={"custom_input inline "+this.isValidInteger(this.props.price.price_first,0,2000000)}
style={{marginRight:'5px'}}
value={this.props.price.price_first || ''} type="text"
onChange={(e)=>this.props.dispatch({type:"price", payload:e.target.value})}
placeholder=" Unesite..."
maxLength="10"/>所以我想在上面放一个下拉列表。
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-08-08 00:39:46
我目前在react中使用html5 datalist，没有任何问题。
下面是它的实现：
<input type="text" list="data" onChange={this._onChange} />
<datalist id="data">
{this.state.data.map((item, key) =>
<option key={key} value={item.displayValue} />
)}
</datalist>Stack Overflow用户
发布于 2019-07-24 06:20:11
数据分析者在React中工作得很好，但您必须结束每个选项标记(在末尾加上一个反斜杠)。
<option value="something" />Stack Overflow用户
发布于 2017-11-09 14:20:36
要使MDN datalist示例在React中工作，只需稍作更改。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
<label>
Choose a browser from this list:
<input list="browsers" name="myBrowser" />
</label>
<datalist id="browsers">
<option value="Chrome" />
<option value="Firefox" />
<option value="Internet Explorer" />
<option value="Opera" />
<option value="Safari" />
<option value="Microsoft Edge" />
</datalist>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45167565
复制相关文章
相似问题