Reactjs React Hooks：我们如何将“材质ui”对话框下拉列表中的选定选项传递给服务器_Reactjs_Express_Axios_React Hooks

Reactjs React Hooks：我们如何将“材质ui”对话框下拉列表中的选定选项传递给服务器

reactjs express

Reactjs React Hooks：我们如何将“材质ui”对话框下拉列表中的选定选项传递给服务器,reactjs,express,axios,react-hooks,Reactjs,Express,Axios,React Hooks,单击保存按钮后，我想从材料界面对话框下拉框中传递一个选项（输入或输出）问题我已将选择字段命名为dailyinport，我想在调用axios时将所选的值输入目前，我得到了值作为未定义我添加了一个演示链接： //Availability.js 从“./modal/DailyStatus”导入DailyStatusDialog；常数可用性=（）=>{ 常量[deleteDialog，setDeleteDialog]=useState（false）； const[playerId，setPl

单击

保存

按钮后，我想从

材料界面对话框

下拉框中传递一个选项（输入或输出）

问题
我已将选择字段命名为

dailyinport

，我想在调用

axios

时将所选的

值

输入

目前，我得到了

值

作为

未定义

我添加了一个演示链接：

//Availability.js
从“./modal/DailyStatus”导入DailyStatusDialog；
常数可用性=（）=>{
常量[deleteDialog，setDeleteDialog]=useState（false）；
const[playerId，setPlayerId]=useState（“”）；
常量[helperText，setHelperText]=useState（“”）；
const loginUserEmail=localStorage.getItem（'loginEmail'）；
常量[dailyinput，setDailyInput]=useState（“”）；
const displayAvailabilityStatus=（）=>{
setDeleteDialog（true）；
}
const onSubmit=（dailyinput）=>{
常量dailyStatus=（）=>{
试一试{
常量参数={
电子邮件：loginUserEmail，
};
常数res=axios.put（'http://localhost:8000/service/availability，dailyinput，{params}）；
console.log（“前端成功消息：+res.data.success”）；
if（res.data.success）{
//在保存到此处后，按“执行其余代码…”。。。
}
否则{
console.log（res.data.message）；
setHelperText（res.data.message）；
}
}捕获（e）{
setHelperText（e.response.data.message）；
}
}
return（）=>{dailyStatus（）}
}
返回(
可利用性
在里面
向前地
在里面
向前地
进入
团队选择
每周玩家可用性
setDeleteDialog（false）}
/>
);
}
导出默认可用性；


//DailyStatus.js
从“@material ui/core/NativeSelect”导入NativeSelect；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
从“axios”导入axios
导出默认函数DailyStatusDialog（{open，onClose，onSubmit}）{
常量[dailyinput，setDailyInput]=useState（“”）；
常数handleChange=（e）=>{
e、 坚持（）；
setDailyInput（{dailystatus:e.target.value}）；
}
返回(
{“输入今天的可用性？”}
我是
handleChange（e）}
id=“选择”
>
选择一个选项
在里面
出来
取消
拯救
);
}


//server.js
app.put（'/service/availability'，异步（req，res）=>{
试一试{
const userEmail=req.query.email；
const dailystatus=req.body.dailyinput；
var选择器={其中：{email:userEmail}}；
const dailyStatus=await UserModel.update（dailyStatus，选择器）；
res.status（200）.json（{dailystatus}）；
}捕获（e）{
res.status（500）.json（{message:e.message}）；
}      
});

这一行有一些语法问题

  onSubmit={onSubmit(dailyinput)}

您认为这是对的，但是

onSubmit

是一个函子，它希望闭包首先发送

dailyinput

，然后导出函数，在此处馈送

onSubmit

属性

这个函子的一个例子是

const onSubmit = (v) => {
      const dailyStatus = async () => {
        try {
          do something about this v 
        }
      }
      
      return () => { dailyStatus() }
}

async

可能会使这里的事情有点复杂，如果您在这方面遇到问题，请尝试使用不带

async

函数的普通api调用。