Как установить значение, которое также позволяет напрямую вводить десятичную точку с помощью ввода в пользовательском ин ⇐ CSS

[Гость]

Я беру ссылку из официального документа

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

В примере пользователь может щелкнуть значок увеличения и уменьшения, чтобы изменить значение, которое также можно ввести непосредственно в текстовое поле.

импорт { ЧакраПровайдер, Куча, HСтек, Кнопка, Вход, использоватьнумберинпут } из "@chakra-ui/react"; const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } = useNumberInput({ шаг: 0,01, значение по умолчанию: 0,5, мин: 0,01, макс: 1,0, точность: 2, }) const inc = getIncrementButtonProps() const dec = getDecrementButtonProps() константный ввод = getInputProps() возвращаться ( + - ); Затем я хочу изменить значение с помощью других кнопок, поэтому я пытаюсь использовать setState. После нескольких попыток я обнаружил, что не могу использовать defaultValue в < code>useNumberInput, поэтому я использую value и onChange.

const [limiInputValue, setLimitInputValue] = useState(0.5); const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } = useNumberInput({ шаг: 0,01, //Значение по умолчанию: лимитВходЗначение, мин: 0,01, макс: 1,0, точность: 2, значение: лимитинпутвалуе, onChange: значение => { console.log('значение onChange', значение); setLimitInputValue(Число(значение)); }, }) const inc = getIncrementButtonProps() const dec = getDecrementButtonProps() константный ввод = getInputProps() возвращаться ( + - setLimitInputValue(0.25)}>Установить ); Все в порядке, но у меня проблема: пользователь не может напрямую ввести десятичную точку в Input.

Как это исправить?

Вот пример моей песочницы:

https://codesandbox.io/p/devbox/twk7v6? ... %3A19%2C18