将来自两个不同输入的值相乘并显示在第三个输入中答案

【问题标题】：Multiply values from two different input and show in the third input将来自两个不同输入的值相乘并显示在第三个输入中
【发布时间】：2020-11-24 16:37:37
【问题描述】：

我有一个表单，我正在使用 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>

【问题讨论】：

您需要的是 setFieldValue 方法。检查这个github.com/formium/formik/issues/692
还是不清楚，我会在两个表单上处理 onChange 吗？？

标签： javascript reactjs formik chakra-ui

【解决方案1】：

为了缩短用于状态管理的代码，您只需从 values 中删除 totalCost 并在使用时计算它。

更新后的代码如下所示：

<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>

此处解释舍入：Round to at most 2 decimal places (only if necessary)

【讨论】：