很抱歉问这个简单的问题，但我是React的新手，我正在尝试使用hodgef/react-simple-keyboard的键盘库，沿着Ant Design来尝试创建一个登录页面。我几乎遵循了这个Codesandbox Example的代码示例，一切正常，直到我将默认的input标记替换为Ant-Design的Input组件。
由此：
<input
id="firstName"
value={getInputValue("firstName")}
onFocus={() => setInputName("firstName")}
placeholder={"First Name"}
onChange={onChangeInput}
/>字符串
到这个
<Form.Item
label={<text style={{ color: 'white' }}>Username</text>}
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
style={{ color: 'white' }}
>
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
</Form.Item>型
使用Ant Design的组件后，当我按下键盘按钮时，输入将不再更新。
这个社区里有人知道是什么问题导致了这个问题吗？是因为<Input>嵌套在<Form.Item>里面，这使得ref不再工作了吗？
因此，如果我只使用input，而不嵌套在Form.Item中，它仍然可以工作：
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>型
如果有人能回答这个愚蠢的问题，我非常感激，我真的是新的，我甚至不知道该从开始搜索什么，真的很抱歉我的英语很差，我不知道如何解释或进一步阐述。
2条答案
按热度按时间u7up0aaq1#
通过以下来自ANTD的this代码示例修复。
基本上，我添加了以下行来调用form方法。
字符串
然后在键盘组件的
onChangeAll监听器中分配输入值，如下所示：型
另外，不要忘记在
Form组件中添加这一行型
ntjbwcob2#
对于任何使用React 18和antd版本4+来解决这个问题的人，留下我如何解决我的问题。我的文件使用antD form，我有一个Form.Item，里面有一个自定义Input。像这样：
字符串
我无法在表单项中使用CustomTextInput输入任何字段。我尝试了一天的所有方法。最终解决这个问题的是删除node_modules和yarn.lock，重新运行yarn（或者npm，如果你有的话）。我一直在更新到不同版本的antd（v4.8.2 -> v4.25.15 -> v5+），这显然会混淆一些库位。请尝试删除这些库位，然后重新运行项目，看看是否可以修复它。