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 时，您想显示一条错误消息。这是您在此处正确应用的内容 screenshot 但是当您在表单内使用输入字段时，有一种不同的方法来处理默认值和 onChange 事件。当您在表单元素中使用 DefaultValue 和 onChange 事件时，它们不会为您提供预期的输出。在这里你必须形成这样的方法

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

从这里学习更多关于 ant Design Form 方法的知识Learn More about ant design form methods

react antd input defaultValue 不显示

react antd input defaultValue is not displayed

reactjs

antd