antd Select 使用动态数据渲染选择项

2021年 11月30 日晴

今天的天气比较好，星期天，也没有出去，最近在学习react，我也不知道学习这个有什么样的作用，其实我现在的工作是比较偏重于后端以及服务器相关的东西，但是总是想做个比较好的网站，有点实际的内容，网站做了很多次，但是整体上总是让我不那么满意，没人访问，而且之前使用的html 里面很多的js代码，看起来总感觉乱糟糟的。好了，不说那么多了，我们来看今天要实现的功能，在antd的组件中有Select这个组件：

这个Select选择器，那么我用到了这样的一个选择器，我把选择作为我搜素的条件，并且选择项目的内容从后台获取到。

是否为根模块，有两个选择项，是和否，我们希望这个数据在页面刚开始加载的时候可以从后台接口中获取，并且渲染到Select上去

1.我们什么时候来调用后台的接口

2.调用后台的接口返回什么样的数据

3.根据数据我们如何渲染到Select 的选择项

上面三个问题，就是我们即将要解决的问题，当然解决了上面三个问题，这个功能也就实现了

接口已经编写好，现在我们需要调用：，这个是接口返回的内容：

根据React 生命周期，我们肯定是在页面渲染之前进行调用：

     componentDidMount(){this.getOptions("1001")}getOptions=(itemorder)=>{Axios.post('/api/codeitem/getitembyorder',{"itemorder":itemorder}).then(res=>{if(res.data.code==='0000'){this.setState({options:res.data.data})}}) }

获取到数据之后，我们需要把数据渲染到页面上：

 <Select style={{ width: 180 }}  placeholder="请选择是否为根节点">{ this.state.options.map((item)=><Option value={item.value}>{item.text}</Option>)}</Select>

然后我们来查询效果：

哈哈，果然实现了

但是还有一个问题，页面加载之后，我们只有两个选择项目了，不能同时查看了，那么我们需要给Select 组件增加一个清除按钮：

   <Select style={{ width: 180 }} allowClear={true} placeholder="请选择是否为根节点">{ this.state.options.map((item)=><Option value={item.value}>{item.text}</Option>)}</Select>

上面实现了

其实这个地方为什么要单独的拿出来记一下

这个也实现我们从后台返回数组，将数据渲染为元素，利用到的 map 这个循环

希望对你有所帮助

antd Select 使用动态数据渲染选择项相关推荐

gulp-jade 动态数据渲染编译模板热更新案例开发
导读我们今天来聊一聊如何使用gulp编译生成jade模板:如果你想快速编写html,就可以使用node下很火的一款模板语法jade, 但你便写完代码后,想要立即看到效果就可以使用gulp生态里面的g ...
支持大数据渲染下拉列表组件开发 SuperSelect(基于antd Select)
功能简介 antd 的 Select 组件不支持大数据量的下拉列表渲染,下拉列表数量太多会出现性能问题, SuperSelect 基于 antd 封装实现,替换原组件下拉列表,只渲染几十条列表数据,随 ...
html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...
bootstrap-multiselect.js如何动态更新select里的数据
在使用jQuery的bootstrap-multiselect插件时可能会遇到一个问题就是想要动态的去更新select里的数据比如我们要使一个id=select的选择框实现多选那么先用ajax获 ...
关于antd Select 限制选择个数的解决方案
关于antd Select 限制选择个数的解决方案参考文章: (1)关于antd Select 限制选择个数的解决方案 (2)https://www.cnblogs.com/weblinda/p/9 ...
Antd Table树形展示，分页后有时候数据渲染不出的问题
项目场景: Antd V4版网页端问题描述: 使用Table树形使用Card onTabChange 切换tab,有时候数据渲染不出的问题 const paginationProps = {Cu ...
antd Select组件单选框自定义输入和可选择输入功能实现
函数组件中的用法 const [searchValue, setSearchValue] = useState(''); const onSearch = curentValu ...
数据可视化之Echarts-lines3D动态轨迹渲染
数据可视化之Echarts-lines3D动态轨迹渲染谈到数据可视化,不得不提到近两年超级火的ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上 ...
关于antd table组件中，数据渲染条数跟后台传入数据不一致的问题
如果出现表格数据渲染跟后台传过来的数据的条数不一致的情况,绝大概率的rowkey的问题. 我这边当时调试的时候,后台的数据我是存在store中的,包括在table重新渲染的时候,我这边传过来的数据 ...

antd Select 使用动态数据渲染选择项

antd Select 使用动态数据渲染选择项相关推荐

最新文章

热门文章