【我的代码生成器】React的FrmUser类源码

FrmUser 类的源码中：FrmUser btnSaveClick 等命名方式都是参考VB.Net的写法。

import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "react";
import { makeStyles, TextField, Grid, Paper, Button, ButtonGroup, } from "@material-ui/core";
import { useStore } from "react-redux";

const FrmUser = forwardRef((props, ref) => {
  const css = cssStyles();

  const [model,setModel] = useState({
    intID:"",
    strName:"",
    dtmBirthday:"",
    intAge:"",
    decMoney:"",
    strRemarks:"",
  });


  useEffect(() => {
    loadDataInit();
   }, []);

  function loadDataInit(){

  }

  const updateChanged = (e) =>{
    const { name, value } = e.target;
    updateModelData(name, value);
  }

  const updateModelData = (key, value ="") =>{
    setModel(prevState => ({...prevState, [key]: value}));
  }

  function validateUIData(){
    console.log(model);
    //if(model.key=="") return false;

    return true;
  }

  const btnSaveClick = async(type) => {
    if(!validateUIData()) return;
    let type = "Add";
    //if(model.id>0) type="Update";

    return true;
  }

    const btnClearAllClick = () => {
        Object.keys(model).forEach(key => {
          updateModelData(key);
       });
    } 

    const btnDeleteClick = () => {
        console.log(model);
        let type = "Delete";

    }

    useImperativeHandle(ref, () => ({
        loadDataSelected(row) {
            btnClearAllClick();
            if (row !== undefined) {
                Object.keys(row).forEach(key => {
                      if (row[key] !== undefined) {
                           updateModelData(key, row[key]);
                      }
                 });
             }
         },
    }));

  return (
    <Paper  className={css.paper}>
      <h3>User</h3>
      <Grid container spacing={3}>
        <Grid item xs={4}>
         <TextField
          fullWidth
          name="intID"
          value={model.intID}
          onChange={updateChanged}
          label="ID"
          />
        </Grid>
        <Grid item xs={4}>
         <TextField
          fullWidth
          name="strName"
          value={model.strName}
          onChange={updateChanged}
          label="Name"
          />
        </Grid>
        <Grid item xs={4}>
         <TextField
          fullWidth
          name="dtmBirthday"
          value={model.dtmBirthday}
          onChange={updateChanged}
          label="BirthdayDate"
          />
        </Grid>
        <Grid item xs={4}>
         <TextField
          fullWidth
          name="intAge"
          value={model.intAge}
          onChange={updateChanged}
          label="Age"
          />
        </Grid>
        <Grid item xs={4}>
         <TextField
          fullWidth
          name="decMoney"
          value={model.decMoney}
          onChange={updateChanged}
          label="Money"
          />
        </Grid>
        <Grid item xs={4}>
         <TextField
          fullWidth
          name="strRemarks"
          value={model.strRemarks}
          onChange={updateChanged}
          label="Remarks"
          />
        </Grid>
      </Grid>
      <Grid container spacing={3}>
        <Grid item xs={3}>
         <Button
           Type = "submit"
           variant="contained"
           fullWidth
           color = "primary"
           className = {css.submit}
           onClick={() => btnSaveClick()}
           >
             Save
           </Button>
        </Grid>
       <Grid item xs={3}>
         <Button
           Type = "submit"
           variant="contained"
           fullWidth
           color = "danger"
           className = {css.delete}
           onClick={() => btnDeleteClick()}
           >
             Delete
           </Button>
        </Grid>
       <Grid item xs={3}>
         <Button
           Type = "submit"
           variant="contained"
           fullWidth
           color = "defualt"
           className = {css.reset}
           onClick={() => btnClearAllClick()}
           >
             Clear All
           </Button>
        </Grid>
      </Grid>
    </Paper>
  );

});

export default FrmUser;

const cssStyles = makeStyles((theme) => ({
    paper: {
        padding: theme.spacing(3),
        flexDirection: "row",
        justifyContent: "space-between",
    },
    submit: {
        color: "#ffffff",
        backgroundColor: "#72421E",
        fontFamily: "Vollkorn",
        marginTop: 3,
    },
    reset: {
        color: "#ffffff",
        backgroundColor: "#7242EE",
        fontFamily: "Vollkorn",
        marginTop: 3,
    },
    delete: {
        color: "#ffffff",
        backgroundColor: "#FE0000",
        fontFamily: "Vollkorn",
        marginTop: 3,
    },
}));