React Antd Input组件defaultValue未生效，控制台值正确但输入框未展示

问题根因 #

1. 当 Form.Item 配置了 name 属性时，Antd Form 会自动接管内部表单控件的 value、onChange 逻辑，你自定义的 value 绑定、onChange 事件都会被覆盖，所以你修改外部的 value 状态不会同步到 Input 组件上。
2. 你自行维护的 onSave 状态没有和 Form 校验逻辑联动，原本配置的 max 校验规则也因为 Form 状态和外部状态冲突无法正常触发。

修复方案 #

根据你的使用场景可以二选一：

方案1：保留Form能力，使用Form内置状态管理（推荐）

直接用Antd Form提供的API做状态管理，不需要额外维护外部value状态，代码更简洁，也能正常使用Form的校验能力：

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

const App = () => {
  // 初始化Form实例
  const [form] = Form.useForm();
  const handleInputChange = (e) => {
    // 输入时的额外处理逻辑可以写在这里
    const currentValue = Number(e.target.value);
  };

  const onSaveBlur = () => {
    // 主动触发校验，也可以在这里加自定义业务逻辑
    form.validateFields(['input']).then(() => {
      // 校验通过后的逻辑
    }).catch(() => {
      // 校验失败后的逻辑
    })
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {/* initialValues直接设置初始值，不需要额外useEffect处理null转3的逻辑 */}
      <Form form={form} initialValues={{input: 3}}>
        <Form.Item
          name="input"
          rules={[
            { max: 10, message: "length should be less then 10 letters!" }
          ]}
        >
          <Input
            type="number"
            onChange={handleInputChange}
            onBlur={onSaveBlur}
          />
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;

方案2：不使用Form的状态管理，完全自定义受控

如果你不需要用到Form的其他能力，直接删掉Form.Item的name属性即可，你自定义的value、onChange就会正常生效：

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

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

  useEffect(() => {
    if (value === null) {
      setValue(3);
    }
  }, [value]);

  // 自定义校验逻辑，超10字符触发错误提示
  const showError = String(value).length >=10;

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Form>
        {/* 删掉name属性，解除Form的状态接管 */}
        <Form.Item
          help={showError ? "length should be less then 10 letters!" : ""}
          validateStatus={showError ? "error" : ""}
        >
          <Input
            type="number"
            value={value}
            onChange={handleInputChange}
          />
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者aahhuhuhu