表单形式json形式传参_介绍形式。 ReactJS表单变得简单

表单形式json形式传参

使用ReactJS的简单，声明式和强大的表单

Mikhail Vasilyev的照片— https://unsplash.com/photos/NodtnCsLdTE

如果只是为了链接而来， 请单击此处 。

我已经编码了几年，并使用了一些技术。 在这条道路上，我成为了Rails的“ 简单表单”（Simple_form）迷 。 我也是React的粉丝。 考虑到这两个因素，我决定构建一个具有simple_form简单性和React自定义功能的库。 称为form-for

简而言之，这就是带有form-for外观。

乍一看，它看起来像是魔术，但是，尽管我认为它很酷，但并不完全是魔术。 Form-for使用schema来决定要为每个field显示的组件。

现在，您已经对它的工作原理有了更广泛的了解，让我们逐步进行操作，创建一个模式，绑定我们的组件，并向您展示一个实际的示例来进行尝试。

资料来源： https : //giphy.com/gifs/bbcamerica-elijah-wood-dirk-gently-l378kNMpVWNmilDLa

1.创建模式

有两种方法可以通过form-for 。 对于这篇文章，我会坚持发给鸽友。

让我们创建一个用户模型。 我们的用户将具有姓名，姓氏，电子邮件，电话号码和访问权限（用户/来宾）。 我们将使用@field注释每个字段，因此form-for知道如何显示它。

2.绑定组件

正如您在上面的代码中看到的那样，每个字段都设置了一个类型。 有些甚至还有一些额外的属性。

现在，我们需要告诉form-for要渲染的组件。 我为引导程序组件创建了一个程序包，使您的生活更加轻松。 它还旨在促进可访问性 。

3.建立表格

现在，让我们将用户，引导程序组件以及Form和Field标签放在一起。

4.直播

我创建了表单的扩展版本。 在这个用户中，用户还有一个todoItems列表，这增加了新的乐趣。 该代码非常简单，就像您在上面看到的那样。

如果您需要更多沙箱示例，我的个人资料中还有两个： https : //codesandbox.io/u/pedsmoreira/sandboxes

4.1 MobX

FormFor与MobX配合得很好 。 我强烈建议尝试一下： https : //codesandbox.io/s/qz087nv8nj

5.回购

形式为/形式为
form-for-从模型 github.com 构建简单的声明式ReactJS表单

查看仓库，那里还有更多说明。 如果愿意，请与您的朋友和同事共享。 我很期待听到您的想法，或者下面的GitHub PR /问题。

如果您也不喜欢评论，lemme会知道您如何认为会更好。

https://giphy.com/gifs/transparent-GwGXoeb0gm7sc

我是 Pedro Moreira ，负责为公司和初创公司开发软件。 我坚信通过开源为社区做出贡献，我自己创建了几个项目。 其中之一就是 GitShowcase ，该平台可帮助开发人员展示自己的才能并找到 理想的 工作 ❤

推特： https : //twitter.com/pedsmoreira

GitHub： https : //github.com/pedsmoreira

GitShowcase
开发人员，在即插即用产品组合中展示您的最佳项目。 最好的部分是免费的。 www.gitshowcase.com

翻译自: https://hackernoon.com/introducing-form-for-reactjs-forms-made-easy-d82d9f5026be

表单形式json形式传参