使用 Grommet 创建受控表单会引发错误

Question

我正在尝试按照 https://v2.grommet.io/form 中的示例使用 Grommet 创建一个基本表单。我的具体表格如下所示：

import React from 'react';
import { Box, Form, FormField, TextInput, Button } from 'grommet';

const defaultValue = {};

const LoginForm = () => {
  const [value, setValue] = React.useState(defaultValue);

  function handleSubmit(e) {
    e.preventDefault();
    const { email, password } = e.value;
    console.log('pretending to log in:', email, password);
    // doLogin(email, password)
  }

  return (
    <Form
      value={value}
      onChange={nextValue => {
        setValue(nextValue);
      }}
      onReset={() => setValue(defaultValue)}
      onSubmit={handleSubmit}
    >
      <FormField label="email" name="email" required>
        <TextInput name="email" />
      </FormField>
      <FormField label="password" name="password" required>
        <TextInput name="password" />
      </FormField>
      <Box direction="row" justify="between" margin={{ top: 'medium' }}>
        <Button type="reset" label="Reset" />
        <Button type="submit" label="Login" primary />
      </Box>
    </Form>
  );
};

只要我开始在任一字段中输入内容，就会得到以下信息：

Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: ...

请注意，如果我将表单代码替换为上面 link 示例中的 cut/paste，我会得到完全相同的错误。

我对错误的含义有相当合理的理解，但我不知道在这种情况下如何解决它。 Grommet 的受控表单组件的实现是否已损坏，或者我是否在我的配置或包中遗漏了可能导致此问题的其他内容？

Answer 1

React.js 受控标准不允许未定义对象。所以问题始于你如何定义你的 defaultValue = {};，因为它是一个空对象，FormField 子项没有初始值，这导致它们未定义，从而导致错误。因此，如果您将预设值更改为更适合您的字段，例如 defaultValue = { password: '' };，它将修复您的错误。

有关 React 受控和不受控输入的更多信息，请阅读此

使用 Grommet 创建受控表单会引发错误

Creating a controlled form with Grommet throws errors

typescript

reactjs

grommet