Javascript 如何创建还可以计算模式、中值和平均值的动态表单

你好，我是Javascript新手，我正在尝试基于这种格式创建一个动态表单

以下是主要目标： 1.一旦用户在备注下选择了一个选项，它将自动显示在风险分类下，并且风险分析字段应像查找详细信息字段一样展开。 2.我希望风险分析字段是动态的，即一旦用户选择备注，它应该能够显示在新行上/它应该根据所选选项（如“查找详细信息”字段）递增。 或 一旦用户选择备注选项，它应该增加风险分析字段。也就是说，如果我在备注下选择了三个不同的选项，它应该在风险分析下的新行上显示每个选项。 下面是我的代码

import React, { Fragment, useEffect, useState, useCallback } from "react";
    import moment from "moment";
    import {
      useFormContext,
      Controller,
      useFieldArray,
      useWatch,
    } from "react-hook-form";
    import { Form, Row, Col, Card, Button } from "react-bootstrap";
    import Select from "../../Shared/Select";
    import Datepicker from "../../Shared/Datepicker";
    import style from './style.css';
    // Data from JSON file
    import riskAssessment from "../Dummy/ic4pro_riskAssessment.json";
    import users from "../Dummy/ic4pro_users.json";
    import designatesJson from '../Dummy/ic4pro_designates.json';
    import account from '../Dummy/ic4pro_account.json';
    import indicators from "../Dummy/ic4pro_amlEntity.json";
    import indicatorJson from "../Dummy/ic4pro_riskIndicator.json";
    // import classification from '../Dummy/ic4pro_accountClassification.json';
    
    const StepTwo = (props) => {
      // const [startDate, setStartDate] = useState(new Date());
    
      const {
        register,
        errors,
        control,
        selectedData,
        changeForm,
        mode,
      } = useFormContext();
    
      const { fields, append, remove } = useFieldArray({
        control,
        name: "accountNo"
      });
      const { field} = useFieldArray({
        control,
        name: "riskIndicator"
      });
    
      const [Indicate,setIndicate]=useState(...[indicators])
      const watchriskIndicator = useWatch({ name: 'riskIndicator' });
      const [ users, setAcct ] = useState([...account.data])
      const watchaccountNo = useWatch({ name: 'accountNo' });
      const watchremarks = useWatch({ name: 'remarks' });
    
      const handleChage = (e) => {
        changeForm(e.currentTarget.name, e.currentTarget.value);
      };
      useEffect(() => {
        if(watchaccountNo) {
          setAcct(prevAcct => {
            const newwatchaccountNo = watchaccountNo.map(uj => uj.accountNo?.accountNo);
            const newAcct = prevAcct?.map(u => ({ ...u, isDisabled: newwatchaccountNo.includes(u.accountNo) }))
            return newAcct;
          })
        }
      }, [watchaccountNo])
      
       const getDesignate = useCallback((key) => {
       const designateFind = indicatorJson.find(de => de.key === key)
       return designateFind?.description;
       }, []);
     let frequency=document.getElementById("risk")
      const now =frequency;
      function compare(){
        if(frequency==="risk"){
           console.log(`the number appear `+parseInt(frequency))
        }
      }
      return (
        <Fragment>
          <Card className="mt-3">
          <Card.Header className="font-weight-bold" style={{ backgroundColor: '#FFC107', padding:'3px', maxHeight:'2.1rem'}}>
              Finding Details
              {/* <KeyOfficer/> */}
            </Card.Header>
            <Card.Body>
                    
                    <Form.Group as={Row} >
                    <Form.Label column sm={2} style={{paddingLeft:"1rem"}}>
                     Account No
                    </Form.Label>
                   
                    <Form.Label column sm={2}>
                      Account Name
                    </Form.Label>
                   
                    <Form.Label column sm={1.9} style={{textAlign:"center",paddingLeft:"1rem"}}>
                     Currency
                    </Form.Label>
                    
                    
                    <Form.Label column sm={2} style={{paddingLeft:"4rem"}}>
                     Open Date
                    </Form.Label>
                    
                    <Form.Label column sm={2} style={{paddingRight:"4rem"}}>
                     Amount
                    </Form.Label>
                    
                    <Form.Label column sm={2.8} style={{marginRight:"12rem"}}>
                   Remark
                    </Form.Label>
                    </Form.Group>  
              {fields.map((item, index) => (
                <>
                <Row key={item.id}>
                  <Form.Group as={Col} sm="2" controlId={`accountNo[${index}].accountNo`}>
                    <Controller
                      id="accountNo"
                      name={`accountNo[${index}].accountNo`}
                      as={Select}
                      options={users}
                      hideSelectedOptions={false}
                      control={control}
                     
                      getOptionLabel={option => `${option.accountNo}`}
                      getOptionValue={option => option.accountNo}
                      rules={{ required: 'Staff Name is required!' }}
                      isInvalid={errors.accountNo?.[index]?.accountNo}
                    />
                  </Form.Group>
                  <Form.Group as={Col}  sm="2" controlId={`accountNo[${index}].acountName`}>
                    
                    <Form.Control 
                    id="accountName"
                    name={`accountName[${index}].accountName`} 
                    ref={register} 
                    style ={{height:'1.8rem'}} 
                    readOnly 
                    defaultValue={watchaccountNo?.[index]?.accountNo?.accountName} />
                  </Form.Group>
                  <Form.Group as={Col} controlId={`accountNo[${index}].Currency`}>
                    <Form.Control
                      id="Currency"
                      style ={{height:'1.8rem', width:"3"}}
                      name={`accountNo[${index}].Currency`}
                      ref={register}
                      style ={{height:'1.8rem'}} 
                      readOnly
                      defaultValue={watchaccountNo?.[index]?.accountNo?.Currency}
                    />
                  </Form.Group>
                  <Form.Group as={Col} controlId={`accountNo[${index}].dateOpened`}>
                    <Form.Control
                    id="dateOpened"
                    style ={{height:'1.8rem', width:"4"}}
                      control={control}
                      name={`accountNo[${index}].dateOpened`}
                      rules={{ required: 'Length of Stay is required!' }}
                      readOnly 
                      // style ={{height:'1.8rem'}} 
                      defaultValue={watchaccountNo?.[index]?.accountNo?.dateOpened}
                      
                    />
                  </Form.Group>
                  <Form.Group as={Col}  controlId={`accountNo[${index}].amount`}>
                    <Form.Control
                    id="amount"
                      name={`accountNo[${index}].amount`}
                      type="number"
                      style ={{height:'1.8rem', width:"4"}} 
                      defaultValue={watchaccountNo?.[index]?.accountNo?.amount}
                      // as={Select}
                      // options={"i"}
                      control={control}
                      rules={{ required: 'Job Stay Year is required!' }}
                      isInvalid={errors.accountNo?.[index]?.amount}
                    />
                  </Form.Group>
                  <Form.Group as={Col} sm="3" controlId="remarks">
                    <Controller
                      id="remarks"
                      name="remarks"
                      as={Select}
                      options={indicatorJson}
                      hideSelectedOptions={false}
                      control={control}
                     
                      getOptionLabel={option => option.key}
                      getOptionValue={option => option.key}
                      rules={{ required: 'Remark is required!' }}
                      //isInvalid={errors.riskIndicator?.[index]?.indicator}
                      // type="text"
                      // options={"7"}
                      control={control}
                      rules={{ required: 'Job Stay Month is required!' }}
                      isInvalid={errors.riskIndicator?.[index]?.indicator}
                    />
                  </Form.Group>
                  
                    <Form.Group as={Col} controlId={`keyOfficers[${index}].delete`}
                      className="d-flex align-items-center justify-content-center" xs="auto"
                    >
                      <Button variant="danger" onClick={() => remove(index)}>Delete</Button>
                    </Form.Group>
                  
                </Row>
                
                </>
              ))}
              <Form.Group>
                <Button variant="primary" type="button" onClick={append}>Add Account</Button>
              </Form.Group>
            </Card.Body>
                  </Card>
                  <Card className="mt-3">
              <Card.Header className="font-weight-bold" style={{ backgroundColor: '#FFC107', padding:'3px', maxHeight:'2.1rem'}}>
              Risk Analysis
            </Card.Header>
                    <Form.Group as={Row} >
                    <Form.Label column sm={2} style={{marginLeft:"2rem"}}>
                     Risk Classification
                    </Form.Label>
                    <Form.Label column sm={1.1} style={{paddingLeft:"12rem"}}>
                      Frequency
                    </Form.Label>
                    <Form.Label column sm={1.1} style={{paddingLeft:"2rem"}}>
                     Scores
                    </Form.Label>
                    <Form.Label column sm={2} style={{marginLeft:"1.7rem"}}>
                    Risk Rating
                    </Form.Label>
                    <Form.Label column sm={2} style={{marginRight:"1rem"}}>
                    Risk Advice
                    </Form.Label>
                    </Form.Group>
                <>
                <Row>
                <Form.Group as={Col} sm="4" controlId={`risk`}>
                    
                    <Form.Control
                      id="risk"
                      name= "risk"
                      type="text"
                      readOnly
                      style={{height:"1.8rem", marginLeft:"2rem"}}
                      defaultValue={getDesignate(watchremarks?.key)} 
                    />
                  </Form.Group>
                  <Form.Group as={Col} sm="1" controlId={`frequency`}>
                    <Form.Control 
                    id="frequency"
                    name={`frequency`} 
                    ref={register} 
                    style={{width:"2", height:"1.8rem", marginLeft:"1rem"}}
                    readOnly
                    // defaultValue={watchaccountNo?.[index]?.accountNo?.accountName} 
                     />
                  </Form.Group>
    
                  <Form.Group as={Col} sm="1" controlId={`scores`}>
                    
                    <Form.Control
                      id="scores"
                      name={`scores`}
                      ref={register}
                      style={{width:"1", height:"1.8rem", marginLeft:"1rem"}}
                      readOnly
                      // defaultValue={watchaccountNo?.[index]?.accountNo?.dateOpened}
                    />
                  </Form.Group>
                  <Form.Group as={Col} sm="2" controlId={`riskRating`}>
                    <Form.Control
                    id="riskRating"
                      control={control}
                      name={`rating`}
                      rules={{ required: 'Length of Stay is required!' }}
                      readOnly 
                      style={{height:"1.8rem", marginLeft:"1rem"}}
                      
                    />
                  </Form.Group>
                  <Form.Group as={Col} controlId={'riskAdvice'}>
                    <Form.Control
                    id="riskAdvice"
                      name={`riskAdvice`}
                      type="text"
                      readOnly
                      style={{height:"1.8rem", marginLeft:"0.3rem", width:"20rem"}}
                      // style={{height:"1.8rem", marginLeft:"14rem"}} 
                      control={control}
                      rules={{ required: 'Job Stay Year is required!' }}
                      // isInvalid={errors.accountNo?.[index]?.amount}
                    />
                  </Form.Group> 
                  </Row>
                </>
                
      <Form inline style={{marginBottom:"2rem"}}>
      <Form.Label className="my-1 mr-2" controlId="me" style={{marginLeft:"2rem"}}>
        Final Risk Rating:
      </Form.Label>
      <Form.Control
      sm="2"
      style={{height:"1.8rem", width:"10rem"}}
      controlId="me"
        readOnly
        type="text"
       
      >
        {/* <option value="0">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option> */}
      </Form.Control>
      <Form.Label className="my-1 mr-2" controlId="us" style={{marginLeft:"2rem"}}>
        Implication
      </Form.Label>
      <Form.Control
        style={{height:"1.8rem", width:"26rem"}}
        readOnly
        type="text"
        controlId="us"
      />
    </Form>
    </Card>
        </Fragment>
      );
    };
    
    function compare(prevProps, nextProps) {
      return JSON.stringify(prevProps) === JSON.stringify(nextProps);
    }
    
    export default React.memo(StepTwo, compare);

import React，{Fragment，useffect，useState，useCallback}来自“React”；
从“时刻”中导入时刻；
进口{
useFormContext，
控制器，
useFieldArray，
useWatch，
}从“反应钩形式”；
从“react bootstrap”导入{Form，Row，Col，Card，Button}；
从“../../Shared/Select”导入选择；
从“../../Shared/Datepicker”导入日期选择器；
从“/style.css”导入样式；
//来自JSON文件的数据
从“./Dummy/ic4pro_riskAssessment.json”导入风险评估；
从“./Dummy/ic4pro_users.json”导入用户；
从“../Dummy/ic4pro_designates.json”导入designatesJson；
从“../Dummy/ic4pro_account.json”导入帐户；
从“./Dummy/ic4pro_amlenty.json”导入指标；
从“./Dummy/ic4pro_riskIndicator.json”导入指示符；
//从“../Dummy/ic4pro_accountClassification.json”导入分类；
常量步骤二=（道具）=>{
//const[startDate，setStartDate]=useState（新日期（））；
常数{
登记
错误，
控制
选定数据，
改变形式，
模式
}=useFormContext（）；
const{fields，append，remove}=useFieldArray({
控制
姓名：“账号”
});
常量{field}=useFieldArray({
控制
名称：“风险指标”
});
const[Indicate，setIndicate]=useState（…[indicators]）
const watchriskdindicator=useWatch（{name:'riskdindicator'}）；
const[users，setAcct]=useState（[…account.data]）
const watchaccountNo=useWatch（{name:'accountNo'}）；
const watchcomments=useWatch（{name:'comments'}）；
常量handleChage=（e）=>{
变更形式（e.currentTarget.name，e.currentTarget.value）；
};
useffect（（）=>{
if（watchaccountNo）{
setAcct（prevAcct=>{
const newwatchaccountNo=watchaccountNo.map（uj=>uj.accountNo？.accountNo）；
const newAcct=prevAcct？.map（u=>（{…u，isDisabled:newwatchaccountNo.includes（u.accountNo）}））
返回新帐户；
})
}
}，[watchaccountNo]）
const getspecify=useCallback（（键）=>{
常量designateFind=indicatorJson.find（de=>de.key==key）
返回designateFind？说明；
}, []);
让频率=document.getElementById（“风险”）
const now=频率；
函数比较（）{
如果（频率=“风险”）{
log（`数字出现`+parseInt（频率））
}
}
返回(
查找详细信息
{/*  */}
帐号
帐户名
通货
开放日期
数量
评论
{fields.map（（项，索引）=>(
`${option.accountNo}`}
getOptionValue={option=>option.accountNo}
规则={required:'Staff Name是必需的！'}
isInvalid={errors.accountNo？[index]？.accountNo}
/>
option.key}
getOptionValue={option=>option.key}
规则={required:'Remark is required！'}
//isInvalid={errors.riskIndicator？[index]？.indicator}
//type=“text”
//选项={“7”}
control={control}
规则={required:'需要工作停留月份！'}
isInvalid={errors.riskIndicator？[index]？.indicator}
/>
删除（索引）}>删除
))}
添加帐户
风险分析
风险分类
频率
分数