Reactjs 套圈-FormField中的自定义组件

在索环

FormField

文档中，它在“组件”下声明

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

---

我想实现一个自定义组件，但不明白它需要如何与受控的

表单

组件交互以提供其

值

属性。是否有一个示例显示了如何在

表单字段中实现自定义组件？
以下是使用自定义输入组件的受控表单的代码示例。我使用了一个普通的输入标记，因为它支持上面提到的docs规范

…它支持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"));


import React，{useState}来自“React”；
从“react dom”导入{render}；
从“Grommet”导入{Box，Button，Form，FormField，Grommet，TextInput}；
从“套圈/主题”导入{grommet}；
常量默认值={
姓名：“，
习俗：“”
};
导出常量应用=（）=>{
const[value，setValue]=使用状态（defaultValue）；
返回(
{
日志（“更改”，下一个值，触摸）；
设置值（下一个值）；
}}
onSubmit={（事件）=>
console.log（“提交”、event.value、event.toucted）
}
>
}//自定义组件
/>
);
};
render（，document.getElementById（“根”））；
感谢您的详细回复；我真的很感激。如果我们想使用一个非标准组件，它不会像输入组件那样自动集成，比如验证码组件，那么它如何将所需的属性（onChange、value等）传递回表单？事先道歉；我已经查看了Form和FormField的来源，但仍然不理解其中涉及的伏都教。魔法在react和grommet中都有，所以你不一定会在grommet代码中找到它。如果您的Captcha组件是在其核心使用输入标记实现的，那么它也应该可以工作。试试看，分享你的结果。谷歌的reCaptcha使用了一个隐藏的文本区域，它似乎不会触发索环表单的onChange事件。我还尝试添加一个隐藏输入，并在验证码完成时设置其值；即使这样也不会触发表单的onChange事件。请随意分享您试图实现的代码示例。目标是在验证码完成时触发表单字段的验证方法，并最终触发表单的验证方法。代码中没有什么比将Google的recaptcha组件作为子组件添加到FormField中更重要的了。我所做的一切都没有达到预期的效果。