React.js 是否支持 HTML5 数据列表？

IT技术 javascript html reactjs html-datalist
2021-04-26 15:14:36

我正在尝试以最简单的方式实现 HTML5 datalist 元素。

像这样的东西：

<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元素并希望嵌入数据列表。

这是我的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个回答

我目前在react中使用html5 数据列表没有问题。

下面是实现：

<input type="text" list="data" onChange={this._onChange} />

  <datalist id="data">
    {this.state.data.map((item, key) =>
      <option key={key} value={item.displayValue} />
    )}
  </datalist>

数据列表在 React 中工作正常，但您必须关闭每个选项标签（末尾带有反斜杠）。

<option value="something" />

让 MDN 数据列表示例在 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>

这对我来说很好用useRef钩子；使用useState有点慢的问题。

<input type="text" ref={item_name_ref} onClick={(e)=>{item_name_ref.current.value=""}}  defaultValue = {props.selectedRecord.item_name} list="item_name_list"/>
<datalist id="item_name_list">
    {  
        productsName.map((item,index)=>{
          return  <option key={uuid()} value={item.item_name} />;
        })
    }
</datalist>

然后我可以获取结果

const handleClick=()=>{ alert(item_name.current.value)}
其它你可能感兴趣的问题
上一篇目标容器不是 DOM 元素 React.js 下一篇用于 3D 打印服务的在线 API