reactjs - Chackra 中的 useNumberInput Hook 与 Formik

Question

问题在于，由于某种原因，递增和递减按钮不会影响输入中的最终值，但是当你直接在输入中输入值时，值会发生变化。

import { Box, Button, FormControl, FormErrorMessage, FormLabel, HStack, Input, useNumberInput } from '@chakra-ui/react';
import { Field, useField } from 'formik';
import React from 'react';

interface TextInputProps{
    name: string;
    label: string;
}

const CountInput: React.FC<TextInputProps> = ({ name, label}) => {
    const [field, { error, touched }] = useField(name);
    const {
        getInputProps,
        getIncrementButtonProps,
        getDecrementButtonProps,
    } = useNumberInput({
        step: 1,
        defaultValue: 1,
        min: 1,
        max: 10,
        precision: 0,
    })

    const inc = getIncrementButtonProps();
    const dec = getDecrementButtonProps();
    const input = getInputProps({ ...field });


    return (
        <Field name={name}>
            {({ form }: any) => {
                return (
                    <FormControl isInvalid={form.errors[name] && form.touched[name]}>
                        <FormLabel htmlFor={name}>{label}</FormLabel>
                        {description && <Box mb={5}>{description}</Box>}
                        <HStack maxW="320px">
                            <Button {...dec}>-</Button>
                            <Input id={name} onChange={(val) => form.setFieldValue(field.name, val)} {...input} />
                            <Button {...inc}>+</Button>
                        </HStack>
                        <FormErrorMessage>{form.errors[name]}</FormErrorMessage>
                    </FormControl>
                );
            }}
        </Field>
    );
}

export default CountInput;

我猜测问题在于将属性传播 ...field 传递给 getInputProps()，后者又重置了该值。

Answer 1

在 ...field 展开后将 onChange 传递给 useNumberInput，如下所示:

const [field, meta, helpers] = useField(name);
const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } =
useNumberInput({
  ...field,
  onChange: (valueAsString, valueAsNumber) => helpers.setValue(valueAsNumber),
});

因为 useNumberInput 的 onChange 参数需要

(method) UseCounterProps.onChange?(valueAsString: string, valueAsNumber: number): void

而 useField 中 field 的 onChange 具有不同的签名。