Grommet — пользовательский компонент в FormField

Вот пример кода контролируемой формы, в которой используется настраиваемый компонент ввода. Я использовал простой тег ввода, поскольку он поддерживает спецификацию документов, как указано выше.

... он поддерживает свойства name, value, onChange (event => {}), а event имеет либо event.value, либо event.target.value.

Однако вы можете свободно использовать свою собственную реализацию компонента ввода, используя приведенный ниже пример шаблона. Значение ввода будет передано в контролируемую форму без дополнительного кодирования. Запустите следующее и проверьте журналы консоли. чтобы увидеть, как значение обновляется при вводе пользовательского ввода.

import React, { useState } from "react";
import { render } from "react-dom";

import { Box, Button, Form, FormField, Grommet, TextInput } from "grommet";
import { grommet } from "grommet/themes";

const defaultValue = {
  name: "",
  custom: ""
};

export const App = () => {
  const [value, setValue] = useState(defaultValue);
  return (
    <Grommet full theme={grommet}>
      <Box fill align="center" justify="center">
        <Box width="medium">
          <Form
            value={value}
            onChange={(nextValue, { touched }) => {
              console.log("Change", nextValue, touched);
              setValue(nextValue);
            }}
            onSubmit={(event) =>
              console.log("Submit", event.value, event.touched)
            }
          >
            <FormField label="TextInput Field" name="name">
              <TextInput name="name" />
            </FormField>
            <FormField
              label="Custom Component Field"
              name="custom"
              component={(props) => <input {...props} />} // custom component
            />

            <Box direction="row" justify="between" margin={{ top: "medium" }}>
              <Button type="submit" label="Update" primary />
            </Box>
          </Form>
        </Box>
      </Box>
    </Grommet>
  );
};

render(<App />, document.getElementById("root"));