React 用input和datalist写的下拉框

前端之家收集整理的这篇文章主要介绍了React 用input和datalist写的下拉框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果如图所示:


输入会有提示


代码如下:

  1. class Suggest extends React.Component{
  2. getValue(){
  3. return this.refs.lowlevelinput.valaue;
  4. }
  5. render(){
  6. const randomid=Math.random().toString(16).substring(2);
  7. return (
  8. <div>
  9. <input
  10. list={randomid}
  11. defaultValue={this.props.defaultValue}
  12. ref='lowlevelinput'
  13. id={this.props.id}
  14. />
  15. <datalist id={randomid}>
  16. {this.props.options.map((item,idx)=>
  17. <option value={item} key={idx}/>
  18. )}</datalist>
  19. </div>
  20. );
  21. }
  22. }
  23. ReactDOM.render(
  24. <div>
  25. <Suggest options={['esd','feff','fsf','fdsg','ghg']}/>
  26. </div>,document.getElementById('app')
  27. );

猜你在找的React相关文章