0

我有一个表单，我正在使用 Formik 验证表单，我想在有输入时将数量输入和单位成本输入的值相乘，然后自动将其显示在总输入中。我正在使用 Formik + Chakra_UI。

<Formik
        initialValues={{
          productName: "",
          productNumber: "",
          unitCost: 0,
          totalCost: 0,
          quantity: 0,
        }}
      >
        {({ values }) => (
          <Form>
            <Field name="productName">
              {() => (
                <Grid templateColumns="repeat(2, 1fr)" gap={5}>
                  <Box>
                    <FormControl>
                      <FormLabel htmlFor="productName">Product Name:</FormLabel>
                      <Input id="productName" placeholder="Product Name" />
                      {/* <FormErrorMessage>{form.errors.name}</FormErrorMessage> */}
                    </FormControl>
                  </Box>
                  <Box>
                    <FormControl>
                      <FormLabel htmlFor="productNumber">
                        Product Number:
                      </FormLabel>
                      <Input id="productNumber" placeholder="Product Number" />
                      {/* <FormErrorMessage>{form.errors.name}</FormErrorMessage> */}
                    </FormControl>
                  </Box>
                  <Box>
                    <FormControl>
                      <FormLabel htmlFor="quantity">Quantity:</FormLabel>
                      <Input id="quantity" placeholder="Quanity" />
                      {/* <FormErrorMessage>{form.errors.name}</FormErrorMessage> */}
                    </FormControl>
                  </Box>
                  <Box>
                    <FormControl>
                      <FormLabel htmlFor="unitCost">Unit Cost:</FormLabel>
                      <Input id="unitCost" placeholder="Unit Cost" />
                      {/* <FormErrorMessage>{form.errors.name}</FormErrorMessage> */}
                    </FormControl>
                  </Box>
                  <Box>
                    <FormControl>
                      <FormLabel htmlFor="totalCost">Total Cost:</FormLabel>
                      <Input id="totalCost" placeholder="Total Cost" />
                      {/* <FormErrorMessage>{form.errors.name}</FormErrorMessage> */}
                    </FormControl>
                  </Box>
                </Grid>
              )}
            </Field>
            <Button isFullWidth mt={6} colorScheme="green" type="submit">
              Submit
            </Button>
          </Form>
        )}
      </Formik>
4

1 回答 1

0

为了使状态管理的代码更短，您可以删除totalCost并values在使用时计算它。

更新后的代码如下所示：

<Formik
    initialValues={{
        productName: "",
        productNumber: "",
        unitCost: 0,
        quantity: 0,
    }}
    onSubmit={...}
>
    {({ values }) => (
        <Form>
            <Grid templateColumns="repeat(2, 1fr)" gap={5}>
                // ... other boxes stay same as before
                <Box>
                    <FormControl>
                        <FormLabel htmlFor="totalCost">Total Cost:</FormLabel>
                        <Input id="totalCost" placeholder="Total Cost" value={values.quantity * values.unitCost} />
                        {/* <FormErrorMessage>{form.errors.name}</FormErrorMessage> */}
                    </FormControl>
                </Box>
            </Grid>
            <Button isFullWidth mt={6} colorScheme="green" type="submit">
                Submit
            </Button>
    </Form>)}
</Formik>

然后你将重复相同的计算onSubmit。应用一些四舍五入也是一个好主意，因为我假设你将它用于货币value={values.quantity * values.unitCost}

也许你可以把它简化为

    <FormControl>
        <FormLabel htmlFor="totalCost">Total Cost:</FormLabel>
        <Box id="totalCost">{Math.round((values.quantity * values.unitCos + Number.EPSILON) * 100) / 100}</Box>
    </FormControl>

此处的舍入解释：最多舍入到小数点后 2 位（仅在必要时）

于 2020-11-26T11:26:30.923 回答