React-Hooks: How can we pass a selected option from material-ui dialog dropdown to server

问题

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.

ISSUE
I have named the select field as dailyinput, and i want to get the selected value in while making an axios call (PUT).

Currently, am getting that value as undefined.
I have added a demo link:

codesandboxlink

// 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 });
   }      
});

回答1:

There's some syntax issue in this line

  onSubmit={onSubmit(dailyinput)}

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 might complicate things here a bit, try use a plain api call without async function if you have trouble on that area.

来源：https://stackoverflow.com/questions/62492503/react-hooks-how-can-we-pass-a-selected-option-from-material-ui-dialog-dropdown