How to limit the input number to max of two decimals with Ant Design?

Question

E.g. 53.23 or 20.15 but not more than 2 decimals. Wondering if there is an Ant Design API for that.

<InputNumber
  defaultValue={10}
  style={{ width: '30%', marginLeft: 28 }}
  name="quantity"
/>

Answer 1

You just need to use precision inside the InputNumber or math.round

<InputNumber
     placeholder='Value'
     onChange={(value) => provideFunctionValue(value)}
     min={1}
     precision={2}
     step={0.1}
     max={10}
/>

You should also try the above answer using toFIxed(2) but that did not worked in my case.

Answer 2

There is no such API for that, the main reason may be that "formatting to decimal" is opinioned (should you round the number to nearest two points decimal? should you just slice it as a string?), so the developer must decide how the handle it manually:

const twoPointDecimal = number => Number(number).toFixed(2);

const App = () => {
  const [value, setValue] = useState(42.54);

  const onChange = number => setValue(twoPointDecimal(number));

  return (
    <FlexBox>
      <InputNumber
        value={value}
        onChange={onChange}
        defaultValue={10}
        style={{ width: '30%', marginLeft: 28 }}
        name="quantity"
      />
    </FlexBox>
  );
};