0

我想在我的应用程序中添加步骤表单以分两步插入客户。我在我的反应应用程序中使用@coreui/react 3.2.3 版。但它没有多步骤表单所以我不得不导入@progress/我的应用程序中的 kendo-react-form ...我使用它的文档来编写代码。但是我的组件没有在步骤中显示。这是我的参考：https ://www.telerik.com/kendo-react-ui/组件/表单/多步表单/

这是我的代码：

在此处输入图像描述

const MainInfo = () => {
<CRow>
        <CCol xs="12" md="6">
          <CCard>
           
            <CCardBody>
              <CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
                <CFormGroup row>
                <CCol md="3">
                    <CLabel htmlFor="select">name</CLabel>
                  </CCol>
                  <CCol xs="12" md="9">
<CInput type="text" id="hf-name" name="hf-name" placeholder="   " autoComplete="" />
  </CCol>
 </CFormGroup >
</CForm >
<CRow>
 </CCardBody>
</CCard>
        <CCol>
          
           
           

}
export default MainInfo

const CardVerification= () => {
<CRow>
        <CCol xs="12" md="6">
          <CCard>

            <CCardBody>
              <CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
 <CFormGroup row>
                  <CCol md="3">
                    <CLabel>national code <CLabel class="text-danger">*</CLabel> </CLabel>
                  </CCol>
                  <CCol xs="12" md="9">
                    <CInputFile 
                      id="file-multiple-input" 
                      name="file-multiple-input" 
                      multiple
                      custom
                    />
                    <CLabel htmlFor="file-multiple-input" variant="custom-file">
                      Choose Files...
                    </CLabel>
                  </CCol>
                </CFormGroup>
</CForm >
<CRow>
 </CCardBody>
</CCard>
        <CCol>




}
export default CardVerification

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Form, FormElement } from "@progress/kendo-react-form";
import { Button } from "@progress/kendo-react-buttons";
import { Stepper } from "@progress/kendo-react-layout";
import  MainInfo  from "./MainInfo";
//const MainInfo = require('./MainInfo');
import   CardVerification   from "./CardVerification";

const stepPages = [MainInfo, CardVerification];
 const NewCustomer = () => {
  const [step, setStep] = React.useState(0);
  const [formState, setFormState] = React.useState({});
  const [steps, setSteps] = React.useState([
    {
      label: "mainInfo",
      isValid: undefined,
    },
    {
      label: " card verification",
      isValid: undefined,
    },
   
  ]);
  const lastStepIndex = steps.length - 1;
  const isLastStep = lastStepIndex === step;
  const isPreviousStepsValid =
    steps
      .slice(0, step)
      .findIndex((currentStep) => currentStep.isValid === false) === -1;
  const onStepSubmit = React.useCallback(
    (event) => {
      const { isValid, values } = event;
      const currentSteps = steps.map((currentStep, index) => ({
        ...currentStep,
        isValid: index === step ? isValid : currentStep.isValid,
      }));
      setSteps(currentSteps);
      setStep(() => Math.min(step + 1, lastStepIndex));
      setFormState(values);

      if (isLastStep && isPreviousStepsValid && isValid) {
        alert(JSON.stringify(values));
      }
    },
    [steps, isLastStep, isPreviousStepsValid, step, lastStepIndex]
  );
  const onPrevClick = React.useCallback(
    (event) => {
      event.preventDefault();
      setStep(() => Math.max(step - 1, 0));
    },
    [step, setStep]
  );
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
      }}
    >
      <Stepper value={step} items={steps} />
      <Form
        initialValues={formState}
        onSubmitClick={onStepSubmit}
        render={(formRenderProps) => (
          <div
            style={{
              alignSelf: "center",
            }}
          >
            <FormElement
              style={{
                width: 480,
              }}
            >
              {stepPages[step]}
              <span
                style={{
                  marginTop: "40px",
                }}
                className={"k-form-separator"}
              />
              <div
                style={{
                  justifyContent: "space-between",
                  alignContent: "center",
                }}
                className={"k-form-buttons k-buttons-end"}
              >
                <span
                  style={{
                    alignSelf: "center",
                  }}
                >
                  Step {step + 1} of 2
                </span>
                <div>
                  {step !== 0 ? (
                    <Button
                      style={{
                        marginRight: "16px",
                      }}
                      onClick={onPrevClick}
                    >
                      Previous
                    </Button>
                  ) : undefined}
                  <Button
                    primary={true}
                    disabled={isLastStep ? !isPreviousStepsValid : false}
                    onClick={formRenderProps.onSubmit}
                  >
                    {isLastStep ? "Submit" : "Next"}
                  </Button>
                </div>
              </div>
            </FormElement>
          </div>
        )}
      />
    </div>
  );
};
export default NewCustomer
4

0 回答 0