Ant Design Form.Item嵌套Input使用react-simple-keyboard时值不更新

根因说明 #

这个问题和ref失效无关，核心是Ant Design Form的默认受控机制导致的：
只要 <Form.Item> 配置了 name 属性，Form组件就会自动接管其包裹的Input组件的 value、onChange 等属性，你手动给Input传入的 value={getInputValue('inputUserName')}、onChange={onChangeInput} 优先级低于Form内部的受控属性，相当于被覆盖失效。
你点击虚拟键盘时更新的是自己维护的外部状态，但Input的显示值由Form内部状态控制，自然不会同步更新。而Input不嵌套在Form.Item里时，没有Form接管受控属性，你传入的value和onChange可以正常生效，所以功能正常。

可行解决方案 #

方案1：统一使用Form状态管理（最推荐，可保留Form的校验、自动提交能力） #

1. 用 useForm 钩子获取Form实例：

import { Form, Input } from 'antd';
const [form] = Form.useForm();

2. 去掉给Input手动传入的 value、onChange 属性，Form会自动处理绑定。
3. 在虚拟键盘的按键回调函数里，直接更新Form内部的对应字段值即可：

// 虚拟键盘的onChange回调里直接调用
form.setFieldValue('username', 新的输入值);

方案2：同步外部状态与Form状态 #

如果你必须自己维护外部的输入值状态，可以在更新外部状态的同时，同步更新Form的内部状态，保证两边一致：

// 你原本更新输入值的逻辑里加一行同步Form状态的代码
const onChangeInput = (e) => {
  // 你原本的逻辑
  setYourInputValue(e.target.value);
  // 新增同步Form状态的逻辑
  form.setFieldValue('username', e.target.value);
}
// 虚拟键盘更新值的时候也同步执行这两个更新操作

方案3：取消Form的自动接管（适合不需要用到Form自动收集值、自动校验的场景） #

直接去掉 <Form.Item> 的 name 属性即可，此时Form不会接管Input的受控属性，你手动传入的value和onChange可以正常生效，但后续需要你手动处理字段校验、表单值收集的逻辑。

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