ANTD Form.Item 中的輸入值未更新

Question

很抱歉問這個簡單的問題，但我是 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's Components 后，當我按下鍵盤按鈕時，輸入將不再更新。

這個社區中的任何人都知道導致這個問題的原因是什么？ 是因為<Input>嵌套在<Form.Item>中，這使得 ref 不再工作了嗎？

因此，如果我只使用輸入，而不嵌套在 Form.Item 中，它仍然可以工作：

    <Input
      id="inputUserName"
      value={getInputValue('inputUserName')}
      onFocus={() => setInputName('inputUserName')}
      placeholder="User Name"
      onChange={onChangeInput}
    />

如果有人能回答這個愚蠢的問題，我將不勝感激，我真的很新，我什至不知道從什么開始搜索，對於我糟糕的英語真的很抱歉，我不知道如何解釋或進一步闡述。

Answer 1

通過遵循 ANTD 中的此代碼示例進行修復。

基本上我添加了以下幾行來調用表單方法。

const [form] = Form.useForm();

然后在鍵盤組件的onChangeAll監聽器中分配輸入值，如下所示：

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

也不要忘記在Form組件中添加這一行

  <Form
    form={form}
    ...
  >