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}><TextFieldfullWidthname="intID"value={model.intID}onChange={updateChanged}label="ID"/></Grid><Grid item xs={4}><TextFieldfullWidthname="strName"value={model.strName}onChange={updateChanged}label="Name"/></Grid><Grid item xs={4}><TextFieldfullWidthname="dtmBirthday"value={model.dtmBirthday}onChange={updateChanged}label="BirthdayDate"/></Grid><Grid item xs={4}><TextFieldfullWidthname="intAge"value={model.intAge}onChange={updateChanged}label="Age"/></Grid><Grid item xs={4}><TextFieldfullWidthname="decMoney"value={model.decMoney}onChange={updateChanged}label="Money"/></Grid><Grid item xs={4}><TextFieldfullWidthname="strRemarks"value={model.strRemarks}onChange={updateChanged}label="Remarks"/></Grid></Grid><Grid container spacing={3}><Grid item xs={3}><ButtonType = "submit"variant="contained"fullWidthcolor = "primary"className = {css.submit}onClick={() => btnSaveClick()}>Save</Button></Grid><Grid item xs={3}><ButtonType = "submit"variant="contained"fullWidthcolor = "danger"className = {css.delete}onClick={() => btnDeleteClick()}>Delete</Button></Grid><Grid item xs={3}><ButtonType = "submit"variant="contained"fullWidthcolor = "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,},
}));