mson json_如何使用MSON在React和Material-UI中自动生成表单-CSDN博客

mson json

by Geoff Cox

杰夫·考克斯(Geoff Cox)

如何使用MSON在React和Material-UI中自动生成表单 (How to autogenerate forms in React and Material-UI with MSON)

Implementing great forms can be a real time-waster. With just a few lines of JSON, you can use MSON to generate forms that perform real-time validation and have a consistent layout. And, MSON comes with a bunch of cool stuff like date pickers, masked fields and field collections.

实施出色的表格可能会浪费大量时间。仅需几行JSON，即可使用MSON生成执行实时验证并具有一致布局的表单。而且， MSON附带了很多很酷的东西，例如日期选择器，蒙版字段和字段集合。

Disclaimer: this post is geared towards those wishing to use Material-UI with React. Future versions of MSON will support other rendering layers.

免责声明 ：这篇文章是针对那些希望将Material-UI与React一起使用的。 MSON的未来版本将支持其他渲染层。

MSON到底是什么？ (What the heck is MSON?)

MSON is a declarative language that has the capabilities of an object-oriented language. The MSON compiler allows you to generate apps from JSON. The ultimate goal of MSON is to allow anyone to develop software visually. You can also use pieces of MSON to turbo charge your form development.

MSON是一种声明性语言，具有面向对象语言的功能。 MSON编译器允许您从JSON生成应用。 MSON的最终目标是允许任何人以可视方式开发软件。您还可以使用MSON片段来加速表单开发。

用MSON生成的基本表格 (A Basic Form Generated with MSON)

Simply declare your form in JSON. Then let the MSON compiler and UI-rendering layer autogenerate your UI:

只需使用JSON声明表单即可。然后，让MSON编译器和UI呈现层自动生成UI：

Did you try submitting the form without filling in any values? Did you notice how real-time validation is automatically baked in?

您是否尝试提交表单而不填写任何值？您是否注意到实时验证是如何自动进行的？

Now, let’s take a closer look at what is happening. The first block of code contains a JSON definition that describes the fields in the form:

现在，让我们仔细看看发生了什么。代码的第一块包含一个JSON定义，该定义描述了以下形式的字段：

This code adds the following fields to your form:

此代码将以下字段添加到您的表单：

The Text component displays some markdown
文本组件显示一些降价
The PersonNameField is used to capture a person’s first and last names
PersonNameField用于捕获一个人的名字和姓氏
The DateField allows a user to choose a date using a slick date picker
DateField允许用户使用光滑的日期选择器选择日期
The PhoneField uses an input mask and country codes to guide the user when entering a phone number
当输入电话号码时， PhoneField使用输入掩码和国家/地区代码来指导用户
The SubmitField contains a Send icon and allows the user to submit the form via a click or by pressing enter
SubmitField包含一个“ 发送”图标，并允许用户通过单击或按Enter提交表单

Now, let’s take a look at the code that renders the component and handles the submit event:

现在，让我们看一下呈现组件并处理Submit事件的代码：

That’s it!? Yup! The mson-react layer automatically knows how to render the form component. It uses pub/sub and Pure Components to keep the rendering up-to-date.

而已！？对！ mson-react层会自动知道如何呈现表单组件。它使用pub / sub和Pure Components使渲染保持最新。

When there is no validation error and the user clicks the submit button, an event with the name equal to the button’s name is emitted. In our case, this event is called submit. Therefore, we can define a handler using the onSubmit property. To keep things simple, we just alert the user of the entered values. Typically you want to do something like contact an API, redirect, etc…

当没有验证错误并且用户单击“提交”按钮时，将发射一个名称等于该按钮名称的事件。在我们的情况下，此事件称为提交。 因此，我们可以使用onSubmit属性定义一个处理程序。为了简单起见，我们只是提醒用户输入的值。通常，您想做一些事情，例如联系API，重定向等。

基本表格2 (Basic Form 2)

Now, let’s go a bit deeper into the CRUD with a different example:

现在，让我们通过另一个示例更深入地了解CRUD：

The first thing you may notice are the validators in the definition:

您可能注意到的第一件事是定义中的验证器：

Each field has a default set of validators, e.g. the EmailField ensures that email addresses are in a valid format. You can also extend these validators for a particular field or even for an entire form. For example, you can prevent the user from entering nope@example.com.

每个字段都有一组默认的验证器，例如EmailField确保电子邮件地址采用有效格式。您还可以将这些验证器扩展到特定字段甚至整个表单。例如，您可以阻止用户输入nope@example.com 。

Next, let’s take a look at the code that loads the initial values when the component is mounted:

接下来，让我们看一下在安装组件时加载初始值的代码：

This code could just as easily be replaced by code that retrieves the values from some API asynchronously.

可以很容易地用异步地从某些API检索值的代码替换该代码。

Finally, we use a more sophisticated event listener to handle the submit action. In a real-world app, you’d probably want to send a request to an API to save the data. You would receive a response from this API. If you receive an error, e.g. the email address is already in use, you can present this error to the user:

最后，我们使用更复杂的事件侦听器来处理Submit操作。在实际应用中，您可能希望向API发送请求以保存数据。您将从此API收到响应。如果收到错误，例如电子邮件地址已被使用，则可以向用户显示此错误：

现场演示 (Live Demo)

This post only touches on a small piece of what you can do using MSON. Because MSON is a full-featured language, you can declare all types of cool components. If you are interested in seeing more live examples, check out the live demo.

这篇文章仅涉及使用MSON可以做的一小部分。因为MSON是一种功能齐全的语言，所以您可以声明所有类型的出色组件。如果您有兴趣查看更多实时示例，请查看实时演示。

结语！ (Wrap It Up!)

If you are using React and Material-UI, you can speed up your app development by autogenerating your forms from JSON. This can be particularly useful if you need to bootstrap an app quickly and don’t want to have to worry about building a UI from scratch.

如果您使用的是React和Material-UI，则可以通过从JSON自动生成表单来加快应用开发速度。如果您需要快速引导应用程序并且不想担心从头开始构建UI，则此功能特别有用。

If you liked this post, please give it a clap or two. Happy autogenerating!

如果您喜欢这篇文章，请给它鼓掌或两个。快乐的自动生成！

关于作者 (About the Author)

Geoff Cox is the creator of MSON, a new declarative programming language that will allow anyone to develop software visually. He’s been self-employed for the greater part of the last 15 years. He loves taking on ambitious, yet wife-maddening, projects like creating a database and distributed data syncing system. You can reach him @redgeoff7 or at github.

杰夫·考克斯(Geoff Cox)是MSON的创造者， MSON是一种新的声明性编程语言，它使任何人都可以可视化地开发软件。在过去的15年中，他大部分时间都是自雇人士。他喜欢承担雄心勃勃但令人发疯的项目，例如创建数据库和分布式数据同步系统。您可以通过@ redgeoff7或通过github与他联系。