在没有类的表单组件内反应数据表

编程问答 2022-05-03

问题描述

我有一个类组件 CompanyRequestDataTable.js（为了简洁起见，这里没有显示）它包含一个带有编辑按钮的 Primereact 数据表。当用户点击编辑按钮时， 显示以下（下面的代码）表单组件 CompanyRequestFormAbc。

我想在此表单组件中在 submit 按钮上方显示一个数据表组件。我正在浏览 this primereact component 并注意到为了使用它，只有三个选项可用：

  1. 类源演示
  2. Hooks 源代码演示
  3. TS 源演示

看看下面我的 CompanyRequestFormAbc.js 组件的代码，我是否需要将它转换成 Class 才能使用 Class Source Demo 或其他东西来使用 Hooks Source Demo？

enter image description here

import React from 'react';
import {Field,Form,useField,withFormik} from 'formik';
import {Button,InputLabel,Menu,MenuItem,Select,TextField,TextareaAutosize} from '@material-ui/core'
import * as Yup from 'yup'

//more imports here


const CompanyRequestFormAbc = (props) => {

    const {values,setFieldValue,touched,errors,isSubmitting,handleReset,handleChange} = props;
  

    const fileUpload = (e) => {
              


       
    }

    return (
        <div>
           <div id="formDiv">

                <Form className="form-column-3">

                    <div className="form-field">
                        <FileUpload
                            name="files"
                            mode='advanced'
                            uploadHandler={fileUpload}
                            customUpload={true}
                            chooseLabel="Attach Files"
                            multiple={false}/>
                    </div> 
                    
                                        
                    </div> 
                    <div className="btn-group-right">
                        <Button size="large" variant="contained" color="primary"
                                type="submit">Submit</Button>
                        <Button size="large" variant="contained" color="primary" onClick={handleReset}
                                style={{marginLeft: '5px'}} type="button">Reset</Button>
                        <Button size="large" variant="contained" color="primary" onClick={props.onCancel}
                                style={{marginLeft: '5px'}} type="button">Cancel</Button>
                    </div>
                </Form>
            </div>
        </div>
    )

};

export const CompanyRequestEnhancedFormAbc = withFormik({
    mapPropsTovalues: props => {
    
       
    
    
        return {
            createDate: props.testRequest && props.testRequest.createDate || '',startDate: props.testRequest && props.testRequest.startDate || '',completeDate: props.testRequest && props.testRequest.completeDate || '',edwEmployeeId: props.testRequest && props.testRequest.employeeId || '',fileId: [sessionStorage.getItem('uploadedFiles')],}
    },validationSchema:validationSchema,handleSubmit(values,{props,resetForm,setErrors,setSubmitting}) {
              // Do something
    },setFieldValue(field,value,shouldVal) {
        console.log('In setFieldValue')
    },displayName: 'Company Request Form',})(CompanyRequestFormAbc)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

formikformikjavascriptprimereactreact-hooksreactjsreactjsreactjsreactjs