ANTD 内输入的值未更新 Form.Item

Question

很抱歉问这个简单的问题，但我是 React 的新手，我正在尝试使用 hodgef/react-simple-keyboard 中的键盘库以及 Ant Design 来尝试创建登录页面。我几乎遵循了此 Codesandbox Example 中的代码示例并且一切正常，直到我将默认输入标签替换为 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}
    />

如果有人能回答这个愚蠢的问题，我将不胜感激，我真的很新，我什至不知道该从什么开始搜索，真的很抱歉我的英语不好，我不知道如何进一步解释或详细说明。

Answer 1

已通过遵循来自 ANTD 的 this 代码示例进行修复。

基本上我添加了以下几行来调用表单方法。

const [form] = Form.useForm();

然后在键盘组件的onChangeAll监听器中分配输入值如下：

      const onChangeAll = (inputs) => {
        setInputs({ ...inputs });
        form.setFieldsValue({
          username: `${inputs.inputUserName}`,
          password: `${inputs.inputPassword}`,
    });
   };

另外别忘了在 Form 组件中添加这一行

  <Form
    form={form}
    ...
  >

ANTD 内输入的值未更新 Form.Item

Value not updating for Input inside ANTD Form.Item

javascript

ecmascript-6

reactjs

antd

react-simple-keyboard