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）其他内容，我的下一步是什么。

基本上，我使用简单的输入 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"/>

所以我想要一个下拉列表。

Answer 1

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

Answer 2

要使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>

Answer 3

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

<option value="something" />

Answer 4

使用@images_blueprint.route('/image/upload', methods=['POST']) def upload(): image = request.files.get('image') if not image: return jsonify(response_obj), 400 else: TEMP_DIR = os.getcwd()+f'/{secrets.token_hex(12)}/' os.mkdir(TEMP_DIR) filename = secure_filename(image.filename) image.save(os.path.join(TEMP_DIR,filename)) #image.save(TEMP_DIR, filename) # <-- Error thrown here "Is a directory" # os.remove(TEMP_DIR)挂钩对我来说效果很好；使用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>

React.js是否支持HTML5 datalist？

4 个答案: