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 的组件后，当我按下键盘按钮时，输入将不再更新。

这个社区中的任何人都知道导致此问题的问题是什么？是否因为

<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}
    ...
  >

Answer 2

对于任何使用 React 18 和 antd 版本 4+ 来回答这个问题的人，留下我如何解决我的问题。我的文件使用 antD 形式，并且我有一个 ，里面有自定义内容。像这样：

 <Col span={24}>
          <Form.Item
            name='street'
            rules={[
              {
                required: true,
                message: f(messages.departmentAddressRequired),
              },
              {
                min: 10,
                message: f(messages.departmentAddressMin),
              },
              {
                max: 256,
                message: f(messages.departmentAddressMax),
              },
            ]}
          >
            <TextInput
              label={f(messages.departmentAddressLabel)}
              fullWidth
              placeholder={f(messages.departmentAddressPlaceholder)}
              required
            />
          </Form.Item>
        </Col>

我无法在表单项内的任何字段中输入 。我尝试了一天的一切。最终解决问题的是删除node_modules和yarn.lock，重新运行yarn（或者npm，如果有的话）。我一直在更新到不同版本的 antd（v4.8.2 -> v4.25.15 -> v5+），这显然混淆了一些库位。尝试删除它们并重新运行项目，看看是否可以解决问题。