react antd input defaultValue 不顯示

Question

我用的是react,antd的Input組件。
如果輸入超過 10 個字符，將顯示錯誤。
當value的值為null時，value的值設置為3，我查看了console.log()中的值，默認值為3。
不應用默認值。
有人幫幫我，拜托...

代碼

import React, { useEffect } from "react";
import { Input, Form } from "antd";

const App = () => {
  const [value, setValue] = React.useState(null);
  const [onSave, setOnSave] = React.useState(null);
  const handleInputChange = React.useCallback((e) => {
    setValue(Number(e.target.value));
  }, []);

  const onSaveBlur = React.useCallback(() => {
    if (String(value).length < 10) {
      setOnSave(true);
    } else {
      setOnSave(false);
    }
  }, [value]);

  useEffect(() => {
    if (value === null) {
      setValue(3);
    }
  }, [value]);
  console.log(value);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Form>
        <Form.Item
          name="input"
          rules={[
            { max: 10, message: "length should be less then 10 letters!" }
          ]}
        >
          <Input
            type="number"
            value={value}
            onChange={handleInputChange}
            onBlur={onSaveBlur}
          ></Input>
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;

Answer 1

據我所知，當數字長度超過 10 時，您想顯示一條錯誤消息。這是您在此處正確應用的內容截圖但是當您在表單內使用輸入字段時，有一種不同的方法使用默認值和 onChange 事件。 當您在表單元素中使用 DefaultValue 和 onChange 事件時，它們不會給您預期的 output 。 在這里你必須形成這樣的方法

'https://pastebin.com/raw/1NmR4tQT'

從這里學習更多關於 ant 設計表單方法的信息 了解更多關於 ant 設計表單方法的信息