如何解决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"));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。