Início / coding / Perguntas / 78091347
Accepted
Morton
Asked: 2024-03-02 11:19:12 +0800 CST

Como setValue que também permite a entrada direta de um ponto decimal com Input no Chakra UI?

  • 772

Tomo uma referência do documento oficial

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

O usuário de exemplo pode clicar no ícone inc e dec para alterar o valor e também inserir diretamente na caixa de texto.

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

Aí quero alterar o valor com outros botões, então tento usar setState. Depois de algumas tentativas, descobri que não conseguia usar defaultValuein useNumberInput, então uso valueand 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>
  );

Está tudo bem, mas tenho um problema: o usuário não consegue digitar o ponto decimal Inputdiretamente.

Como corrigi-lo ?

Aqui está meu exemplo de sandbox:

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

html

1 respostas

  1. Best Answer

    O problema que você está enfrentando é: em sua onChangefunção, você está convertendo o valor em um número imediatamente com Number(value). Isso pode criar problemas ao digitar números decimais porque assim que você digitar o ponto decimal (sem os números seguintes), Number(value)retornará 0se a entrada não for um número válido, o que efetivamente remove o ponto decimal da entrada.

    Para corrigir isso, permita que o usuário insira decimais não convertendo imediatamente o valor de entrada em um número dentro do onChangemanipulador. Atualize o limiInputValueestado apenas se o novo valor for um número válido dentro do intervalo especificado.

    Siga o código abaixo: -

    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

relate perguntas