javascript - ANTD Form.Item 内的输入值未更新
问题描述
很抱歉问这个简单的问题,但我是 React 的新手,我正在尝试使用来自 的键盘库hodgef/react-simple-keyboard
,以及Ant Design
尝试创建登录页面。我几乎遵循了这个Codesandbox 示例中的代码示例并且一切正常,直到我将默认输入标记替换为 Ant-Design 的输入组件。
由此:
<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 不再工作了吗?
因此,如果我只使用输入,而不嵌套在 Form.Item 中,它仍然可以工作:
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
非常感谢有人能回答这个愚蠢的问题,我真的很新,我什至不知道从什么开始搜索,真的很抱歉我的英语不好,我不知道如何解释或进一步阐述。
解决方案
通过遵循ANTD 中的此代码示例进行修复。
基本上我添加了以下几行来调用表单方法。
const [form] = Form.useForm();
然后在键盘组件的监听器中分配输入值,onChangeAll
如下所示:
const onChangeAll = (inputs) => {
setInputs({ ...inputs });
form.setFieldsValue({
username: `${inputs.inputUserName}`,
password: `${inputs.inputPassword}`,
});
};
也不要忘记在Form
组件中添加这一行
<Form
form={form}
...
>
推荐阅读
- gcc - 提取调试信息并将其存储到单独的文件中
- python - arcpy 中同一数据集中所有对象的重叠 (st_overlaps)
- r - ggplot2:使用独立的“Y”轴改变刻面宽度
- php - 无效的捆绑包模板覆盖
- java - 用单个类构建“父/子”系统
- jquery - 通过按下回车键而不触发 commandButton 提交事件来编辑 treeTable primefaces 上的行
- python - 拦截(使用 Python)从另一个进程写入文件的数据
- git - 在 GitHub 中,更新一个分支以匹配另一个分支
- c# - 为什么我在实例化抽象类时会出错?
- javascript - 如何使“显示更多”和“显示更少”按钮仅适用于它们自己的 div 中的文本,而不适用于使用 Vue.js 的所有文本