主页 / coding / 问题 / 78091347
Accepted
Morton
Asked: 2024-03-02 11:19:12 +0800 CST

如何设置值并允许在 Chakra UI 中使用输入直接输入小数点？

  • 772

我参考了官方文档

https://chakra-ui.com/docs/components/number-input

示例用户可以单击 inc 和 dec 图标来更改值，也可以直接在文本框中输入。

import {
  ChakraProvider,
  Stack,
  HStack,
  Button,
  Input,
  useNumberInput
} from "@chakra-ui/react";

  const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } =
    useNumberInput({
        step: 0.01,
        defaultValue: 0.5,
        min: 0.01,
        max: 1.0,
        precision: 2,
    })

  const inc = getIncrementButtonProps()
  const dec = getDecrementButtonProps()
  const input = getInputProps()

  return (
    <Stack>
    <HStack maxW='320px'>
      <Button {...inc}>+</Button>
      <Input {...input} />
      <Button {...dec}>-</Button>
    </HStack>
    </Stack>
  );

然后我想用其他按钮改变值，所以我尝试使用setState，经过一番尝试发现不能使用defaultValuein useNumberInput，所以我使用value和onChange。

const [limiInputValue, setLimitInputValue] = useState(0.5);

  const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } =
    useNumberInput({
        step: 0.01,
        // defaultValue: limiInputValue,
        min: 0.01,
        max: 1.0,
        precision: 2,
        value: limiInputValue,
        onChange: value => {
          console.log('onChange value', value);
          setLimitInputValue(Number(value));
        },
    })

  const inc = getIncrementButtonProps()
  const dec = getDecrementButtonProps()
  const input = getInputProps()

  return (
    <Stack>
    <HStack maxW='320px'>
      <Button {...inc}>+</Button>
      <Input {...input} />
      <Button {...dec}>-</Button>
    </HStack>
    <Button onClick={() =>  setLimitInputValue(0.25)}>Set</Button>
    </Stack>
  );

一切都很好，但我有一个问题是用户无法Input直接输入小数点。

如何修复它？

这是我的沙箱示例：

https://codesandbox.io/p/devbox/twk7v6?file=%2Fsrc%2Findex.tsx%3A19%2C18

html

1 个回答

  1. Best Answer

    您遇到的问题是，在您的onChange函数中，您立即使用 将该值转换为数字Number(value)。这可能会在输入十进制数字时产生问题，因为一旦输入小数点（没有后面的数字），如果输入不是有效数字，Number(value)就会返回0，这实际上会从输入中删除小数点。

    要解决此问题，请允许用户输入小数，但不立即将输入值转换为onChange处理程序内的数字。仅limiInputValue当新值是指定范围内的有效数字时才更新状态。

    请按照以下代码操作：-

    onChange: value => {
    console.log('onChange value', value);
    // Check if the value is a valid floating point number or if it's an empty string
    if (value === '' || (!isNaN(value) && value[value.length - 1] !== '.')) {
        // Update the state only if the value is within the min and max range or it's an initial input
        const numericValue = parseFloat(value);
        if (numericValue >= 0.01 && numericValue <= 1.0 || value === '') {
            setLimitInputValue(numericValue);
        }
    } else if (value[value.length - 1] === '.') {
        // Allow the user to type the decimal point
        setLimitInputValue(value);
    }
},
    • 1

相关问题