我正在尝试以一种最简单的方式实现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"/>
所以我想在上面放一个下拉列表。
发布于 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>
发布于 2019-07-24 06:20:11
数据分析者在React中工作得很好,但您必须结束每个选项标记(在末尾加上一个反斜杠)。
<option value="something" />
发布于 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>
https://stackoverflow.com/questions/45167565
复制相似问题