React-Hooks:如何从Material-UI对话框下拉列表中将所选选项传递给服务器 [英] React-Hooks: How can we pass a selected option from material-ui dialog dropdown to server
本文介绍了React-Hooks:如何从Material-UI对话框下拉列表中将所选选项传递给服务器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
点击SAVE按钮后，我想从material-ui dialog下拉框中传递一个选项(In或Out).
I would like to pass an option (either In or Out) from the material-ui dialog drop-down box once the SAVE button is clicked.
问题
我已将选择字段命名为dailyinput，我想在进行axios调用(PUT)时获得选定的value.
ISSUE
I have named the select field as dailyinput, and i want to get the selected value in while making an axios call (PUT).
当前，该value作为undefined.
我添加了一个演示链接:
Currently, am getting that value as undefined.
I have added a demo link:
// Availability.js
import DailyStatusDialog from "../modal/DailyStatus";
const Availability = () => {
const [deleteDialog, setDeleteDialog] = useState(false);
const [playerId, setPlayerId] = useState("");
const [helperText, setHelperText] = useState('');
const loginUserEmail = localStorage.getItem('loginEmail');
const [dailyinput, setDailyInput] = useState('');
const displayAvailabilityStatus = () => {
setDeleteDialog(true);
}
const onSubmit = (dailyinput) =>{
const dailyStatus = () => {
try {
const params = {
email: loginUserEmail,
};
const res = axios.put('http://localhost:8000/service/availability', dailyinput, {params} );
console.log("Front End success message:" + res.data.success);
if (res.data.success) {
// push do the rest of code after save here...
}
else {
console.log(res.data.message);
setHelperText(res.data.message);
}
} catch (e) {
setHelperText(e.response.data.message);
}
}
return () => { dailyStatus() }
}
return (
<div className="availability_wrapper">
<h2>Availability</h2>
<div className="wrap">
<div className="container">
<div className="dailystatus_section">
<span className="playerdailyrecord">
<div className="row">
<div className="playerdailyrecord_main">
<span className="dailstatus_playerphoto">
<img
className="dailstatus_playerImage"
src="images/photo-1592436806055.JPG"
/>
</span>
<span className="dailstatus">In</span>
<span className="dailstatus_playerposition">Forward</span>
</div>
<div className="playerdailyrecord_main">
<span className="dailstatus_playerphoto">
<img
className="dailstatus_playerImage"
src="images/photo-1592436806055.JPG"
/>
</span>
<span className="dailstatus">In</span>
<span className="dailstatus_playerposition">Forward</span>
</div>
</div>
<span className="">
<button
className="OverlayDailyStatus"
onClick={displayAvailabilityStatus}
>Enter</button>
</span>
</span>
</div>
</div>
<div>
<div className="container">
<div className="playerdistribution_section">
<h4>Team Selection</h4>
</div>
</div>
<div className="container">
<div className="weeklycount_graph_section">
<h4>Weekly Player Availability</h4>
</div>
</div>
</div>
</div>
<DailyStatusDialog
onSubmit={onSubmit(dailyinput)}
open={deleteDialog}
onClose={() => setDeleteDialog(false)}
/>
</div>
);
}
export default Availability;
// DailyStatus.js
import NativeSelect from '@material-ui/core/NativeSelect';
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import axios from 'axios'
export default function DailyStatusDialog({ open, onClose, onSubmit }) {
const [dailyinput, setDailyInput] = useState('');
const handleChange = (e) => {
e.persist();
setDailyInput({ dailystatus: e.target.value });
}
return (
<Dialog
open={open}
onClose={onClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Enter today's availability ?"}
</DialogTitle>
<DialogActions>
<InputLabel htmlFor="select">I am </InputLabel>
<NativeSelect
defaultValue={'DEFAULT'}
name="dailyinput"
onChange={e =>handleChange(e)}
id="select"
>
<option value="DEFAULT" disabled>Choose an option</option>
<option value="in">In</option>
<option value="out">Out</option>
</NativeSelect>
</DialogActions>
<DialogActions>
<Button onClick={onClose} color="primary">Cancel</Button>
<Button onClick={onSubmit} color="primary" autoFocus>Save</Button>
</DialogActions>
</Dialog>
);
}
// server.js
app.put('/service/availability', async (req, res) => {
try {
const userEmail = req.query.email;
const dailystatus = req.body.dailyinput;
var selector = { where: { email: userEmail } };
const dailyStatus = await UserModel.update(dailystatus, selector);
res.status(200).json({ dailystatus });
} catch (e) {
res.status(500).json({ message: e.message });
}
});
推荐答案
此行中存在一些语法问题
There's some syntax issue in this line
onSubmit={onSubmit(dailyinput)}
您认为这是对的，但是onSubmit是一个函子，它希望闭包首先将dailyinput发送进来，然后导出函数以便在此处提供onSubmit道具.
You are thinking it right, however onSubmit is a functor which expects a closure to first send dailyinput in and then export a function to feed onSubmit prop here.
此仿函数的一个例子可能是
An example of this functor could be
const onSubmit = (v) => {
const dailyStatus = async () => {
try {
do something about this v
}
}
return () => { dailyStatus() }
}
async可能会使事情复杂化，如果您在该区域遇到问题，请尝试使用不带async函数的普通api调用.
async might complicate things here a bit, try use a plain api call without async function if you have trouble on that area.
这篇关于React-Hooks:如何从Material-UI对话框下拉列表中将所选选项传递给服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
