江苏龙网

  1. 首页 > 人文 > >

使用机器学习数据集构建销售预测Web应用程序( 五 )

我们的最终用户界面是集合下拉菜单项 ， 其中单个项如下所示：
使用机器学习数据集构建销售预测Web应用程序文章插图
我们将在src文件夹中创建一个名称为optionsSources.json的JSON文件 。 JSON文件中的每个条目都包含以下对象：
{"CONSOLE": {"options": ["ps2","x360","ps3","pc"],"icon": "?","dropDownPlaceholder": "Select Console"}}下拉菜单中显示的选项位于options数组中 ， 下拉菜单选项左侧显示的图标和标签位于icon和dropDownPlaceholder项 。 我们需要创建多个这样的下拉列表 ， 因此要添加的完整JSON文件如以下文件所示：

接下来 ， 我们需要在我们的应用程序中实现下拉组件 。 在src文件夹中创建一个名为components的文件夹 ， 并在components文件夹中创建一个名为OptionSelection.js的文件
我们将编写一个功能组件 ， 该组件返回一个下拉项 ， 如下所示：
import React,{ useState } from 'react';import optionSources from'../optionsSources.json';function OptionSelection({itemKey, setOptionInObject}) {const title = optionSources[itemKey].dropDownPlaceholder;const icon = optionSources[itemKey].icon;return({icon}{` ${title}`}{title}{renderOptionsDropdown()})}export default OptionSelection;在上面的组件中 ， 我们itemKey从第3行的父组件中获得prop（param）值 。 我们假设itemKey从父组件接收的是CONSOLE 。 在第4行和第5行 ， 我们首先提取显示在下拉菜单左侧的标题和图标 。 然后 ， 根据Boostrap文档在创建下拉列表时 ， 在第6行的返回函数中使用HTML标签 。
接下来 ， 我们需要实现renderOptionsDrop在返回函数中定义的函数 ， 如下所示：
import optionSources from'../optionsSources.json';function OptionSelection({itemKey, setOptionInObject}) {...const renderOptionsDropdown = () => {const selectionOptions = optionSources[itemKey].options;return selectionOptions.map((selectionOption, index)=>{return (handleDropDownSelection(selectionOption)}>{selectionOption});})}...}在第5行 ， 我们从optionSources JSON对象获取特定项的options数组 ， 并将其存储在selectionOptions变量中 。
然后在第6行 ， 我们使用map函数迭代数组并显示下拉选择项 。 我们必须在第10行使用onClick函数更新下拉项的选定值 。
然后实现onClick处理程序中的函数handleDropDownSelection ， 如下所示：
import React,{ useState } from 'react';...function OptionSelection({itemKey, setOptionInObject}) {const [currentSelectedOption, setSelectedOption] = useState(null);const handleDropDownSelection = (consoleOption) => {setSelectedOption(consoleOption)setOptionInObject(itemKey, consoleOption)}...}我们在第1行输入了useState hook 。 它是一个内部函数 ， 允许我们使用状态变量的概念动态更新值 。 关于这个函数的更多信息可以在这里找到：
  • React useState docs:
在第7行 ， 我们更新下拉列表的选定选项 。 在第8行中 ， 我们将选择的值传递回父函数以进行进一步处理 。
这个组件的完整代码可以在这里找到：
然后我们在src文件夹中导入此选项并对服务器进行API调用 。 完整的代码可以在这里找到：
然后在handleInputSubmission函数中对后端进行API调用 ， 如下所示：
import React, {useState} from 'react';import axios from 'axios';function App() {...const handleInputSubmission = () => {if(selectedObject} else {setRequestFailed("Please select all fields before submitting request")}}}


推荐阅读


上一篇：我为什么放弃了ThinkPad，选择入手ThinkBook

下一篇：成长思维：我大哥对“道法术器”的理解，80%的人不懂