Question

我正在尝试使用Formik创建多步骤表单，但我无法单击“搜索”按钮时设置表单值。当我点击搜索按钮然后我设置了数据，我想自动进行田地制作和模型制作我该怎么办？

这是我的stepper.js页面-

const renderStep = (
  step,
  values,
  SearchButtonClick,
  setFieldValue,
  vehicleData
) => {
  switch (step) {
    case 1:
      return <Form1 values={values} />;
    case 2:
      return (
        <Form2
          values={values}
          SearchButtonClick={SearchButtonClick}
          setFieldValue={setFieldValue}
          vehicleData={vehicleData}
        />
      );
  

    default:
      return <Form1 values={values} />;
  }
};

const Stepper = () => {
  const [step, setStep] = useState(1);
  const [vehicleData, setVehicleData] = useState({});

  function SearchButtonClick(data) {
   const value={
    "vehicleId": "V1",
    "rcNo": "OD01AB1234",
    "chassisNo": "ODXYZ123",
    "engineNo": "ENABC012",
    "make": "HYUNDAI MOTOR INDIA LTD ",
    "model": "HYUNDAI SANTRO",
    "fuel": "PETROL",
    "vehicle_type": "Motor Car",
    "pollutionNorms": "Not Available",
    "mfgYear": 2017
}
setVehicleData(value)
  }

 
  const formData = {
    PolicystartDate: "",
    PolicyendDate: "",
    regNo: "OD01AB1234",
    make: "",
    model: "",
   
  };
  function handleSubmit(values) {
    debugger;
    setStep((step) => step + 1);
    console.log({
      ...values,
      PolicystartDate: moment(values.PolicystartDate).toISOString(),
      PolicyendDate: moment(values.PolicyendDate).toISOString(),
    });
  }

  return (
    <MainWrapper>
      <>
        {/* <Header title="Multi Step Form using React And Formik" /> */}
        <Formik
          enableReinitialize
          initialValues={{ ...formData }}
          onSubmit={handleSubmit}
        >
          {({
            errors,
            touched,
            isSubmitting,
            setFieldValue,
            setFieldTouched,
            values,
            ...rest
          }) => (
            <Form>
              {renderStep(
                step,
                values,
                SearchButtonClick,
                setFieldValue,
                vehicleData
              )}
              <StepButton step={step} />
            </Form>
          )}
        </Formik>
      </>
    </MainWrapper>
  );
};
export default Stepper;

这是我的第一个表格----

function Form1(props) {
  console.log(props);

  return (
    <>
      <PageHeader
        style={{
          border: "1px solid rgb(235, 237, 240)",
        }}
        title="Cover"
      />
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <div
          style={{
            height: "100%",
            width: "30%",
            marginLeft: "15px",
          }}
        >
          <Field
            name="PolicystartDate"
            label="Policy Start Date"
            component={DatePicker}
            isColumn
            width={"100%"}
            value={props.values.PolicystartDate}
            inlineLabel
            style={{
              flexBasis: "80%",
              height: "33px",
              width: "100%",
              marginTop: "4px",
            }}
          />
          <Spacer />
          <Field
            name="PolicyendDate"
            label="Policy End Date"
            component={DatePicker}
            isColumn
            width={"100%"}
            value={props.values.PolicyendDate}
            inlineLabel
            style={{
              flexBasis: "80%",
              height: "33px",
              width: "100%",
              marginTop: "4px",
            }}
          />
          <Spacer />
        </div>
      </div>
    </>
  );
}
export default Form1;

这是我的第二个表格-------

function Form2(props) {
  console.log(props);
  return (
    <>
   

     
        <StyledLabel>Registration Number</StyledLabel>
        
            <Field
              name="regNo"
              component={InputComponent}
              isColumn
            
              isColumn
              style={{
                
                height: "33px",
                width: "80%",
              
              }}
            />
        
            <Button
              style={{ marginTop: "21px" }}
              onClick={() =>
                props.SearchButtonClick(props.values.regNo, props.setFiledValue)
              }
            >
              Search
            </Button>
          
       
    
          <Field
            disabled="true"
            name="make"
            label="Make"
            width={"100%"}
            isRequired
            isColumn
            component={InputComponent}
            style={{
              flexBasis: "80%",
              height: "33px",
              marginTop: "4px",
            }}
          />
    
          <Field
            disabled="true"
            name="model"
            label="Model"
            width={"100%"}
            isRequired
            isColumn
            component={InputComponent}
            style={{
              flexBasis: "80%",
              height: "33px",
              marginTop: "4px",
            }}
          />
      
export default Form2

Answer 1

通过props在Form 2上设置字段值，与您在Form1中设置的值相同

function Form2(props) {
  console.log(props);
  return (
    <>
    
        <StyledLabel>Registration Number</StyledLabel>
        
            <Field
              name="regNo"
              component={InputComponent}
              isColumn
            
              isColumn
              style={{
                
                height: "33px",
                width: "80%",
              
              }}
            />
        
            <Button
              style={{ marginTop: "21px" }}
              onClick={() =>
                props.SearchButtonClick(props.values.regNo, props.setFiledValue)
              }
            >
              Search
            </Button>
          
       
    
          <Field
            disabled="true"
            name="make"
            label="Make"
            width={"100%"}
            isRequired
            isColumn
            value={props.values.make}
            component={InputComponent}
            style={{
              flexBasis: "80%",
              height: "33px",
              marginTop: "4px",
            }}
          />
    
          <Field
            disabled="true"
            name="model"
            label="Model"
            width={"100%"}
            isRequired
            isColumn
            value={props.values.model}
            component={InputComponent}
            style={{
              flexBasis: "80%",
              height: "33px",
              marginTop: "4px",
            }}
          />
      
export default Form2

如何使用Formik在多步表单上设置Field值？

1 个答案: