Grommet - FormField 中的自定义组件

问题描述

在 grommet FormField 文档中，它在 Component 下说明；

组件可以是自定义的，只要它支持 name、value、onChange (event => {}) 属性，而 event 有 event.value 或 event.target.value。

我想实现一个自定义组件，但不明白它需要如何与受控的 Form 组件交互以提供其 value 属性。是否有示例说明如何在 FormField 中实现自定义组件？

解决方法

这是一个使用自定义输入组件的受控表单的代码示例。我使用了一个普通的输入标签，因为它支持上面提到的文档规范

...它支持name、value、onChange(event => {})属性，而event有event.value或event.target.value。

但是，您可以使用下面的模板示例随意使用自己的输入组件实现。输入的值将传送到受控表单，无需额外编码。运行 the following 并查看控制台日志以查看在您输入自定义输入时值是如何更新的。

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"));