React.js支持HTML5 datalist吗？

Question

我正在尝试以最简单的方式实现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）其他东西，我的下一步应该是什么？

基本上，我正在使用普通的input 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"/>

所以我想在那个上面放一个下拉菜单。

- EugenSunic

---

尝试这个 - https://dev59.com/al4d5IYBdhLWcg3wAelX - Utkarsh Dubey

ReactJS支持的Dom元素 - https://facebook.github.io/react/docs/dom-elements.html - Utkarsh Dubey

Answer 1

我目前在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>

- Sebastian K.

---

我该如何获取从下拉菜单中通过键盘或鼠标单击选择选项时的事件？ - PCK

数据列表本身没有特定的事件来处理这个问题。但是你可以使用输入元素的oninput事件。 请参考此答案 https://dev59.com/S10a5IYBdhLWcg3wt6qK#32205204 - Sebastian K.

Answer 2

在React中，datalist可以正常工作，但您必须关闭每个选项标签（在末尾使用反斜杠）。

<option value="something" />

- Olemak

Answer 3

只需要做出一点改动，就可以在React中让MDN datalist例子正常运作。

https://developer.mozilla.org/zh-CN/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>

- Charlie 木匠

Answer 4

使用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)}

- Marcial Glori

Answer 5

正确地关闭选项标签不会引发任何错误。

<input list="browsers">

// Not working code
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
</datalist>

//Working Code
<datalist id="browsers">
  <option value="Internet Explorer" />
  <option value="Firefox" />
</datalist>

- ashutosh