And Design InputNumber组件中如果输入框的值为null，如何默认为指定值

And Design InputNumber组件中如果输入框的值为null，如何默认为指定值

import "./index.css";
import { InputNumber } from "antd";

const onChange = (value) => {
  console.log("changed", value);
};

const App = () => (
  <InputNumber
    min={0}
    max={10}
    defaultValue={3}
    onChange={onChange}
  />
);

export default App;

这个是官网提供的代码，当我们删除InputNumber框内的值，然后InputNumber中的光标失焦后，输入框内的值没有变为0，这不是我们期待的结果。

 

下面我们只需要添加一句代码就可以完成这个功能，代码如下

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { InputNumber } from "antd";

const onChange = (value) => {
  console.log("changed", value);
};

const App = () => (
  <InputNumber
    min={0}
    max={10}
    defaultValue={3}
    onChange={onChange}
    formatter={(value) => (!value ? 0 : value)}
  />
);

export default App;

效果如下：